CSS දන්නා යක්ක පුතෙක් එන්නකෝ.

[san2d3]

මගේ ගාව තියෙනවා images ටිකක් display කරන්න හදපු පොඩි කෝඩ් කෑල්ලක්. පහල දාල තියෙනවා මුල් ටික. මේකේ තියෙන ප්‍රශ්නේ තමයි images ටික ඉවර උනාමත් තව හෙන white space එකක් එනවා page එක ඉවර වෙන්න කලින්. ඒ ටික අයින් පුලුවන්ද?


<style> :root { --card_width: 370px; --row_increment: 10px; --card_border_radius: 16px; --card_small: 26; --card_medium: 43; --card_large: 45; } body { margin: 0; padding: 0; padding-top: 5px; /* background-color: grey; */ /* scroll-behavior:smooth; */ }

 

[Wild-EYE]

Bump

 

[MachoMan]

B
U
M
P

 

[kolavari]

Styles ocharaida?

 

[supun_sg]

Screenshot ekak dapan ko white space enne page height ekata wada aduwen content thibila da nathnam scroll eken passeth enawada ?

 

[san2d3]

Styles ocharaida?

නැ හෙන දිගට තියෙනවා. මන් ඔය මුල් ටික දැම්මේ.

 

[Wild-EYE]

Bump

 

[LazyLizard]

අන්ධය ඇතාගෙ හැටි කිව්ව වගේ තමා උත්තර දෙන්න වෙන්නෙ අපෙ උන්දලට

 

[MachoMan]

නැ හෙන දිගට තියෙනවා. මන් ඔය මුල් ටික දැම්මේ.

ඔය ටික විතරක් දාලා කියන්න අමාරුයි.
Right click karala inspect element gihin බලන්න...
එතනදී ඔය එලිමෙන්ට් එක ගැන අයිඩියා එකක් ගන්න පුලුවන්

 

[san2d3]

Screenshot ekak dapan ko white space enne page height ekata wada aduwen content thibila da nathnam scroll eken passeth enawada ?

මේක මචන් horizontal scroll වෙන්නේ.

---

ඔය ටික විතරක් දාලා කියන්න අමාරුයි.
Right click karala inspect element gihin බලන්න...
එතනදී ඔය එලිමෙන්ට් එක ගැන අයිඩියා එකක් ගන්න පුලුවන්

Styles ocharaida?

අන්ධය ඇතාගෙ හැටි කිව්ව වගේ තමා උත්තර දෙන්න වෙන්නෙ අපෙ උන්දලට

Screenshot ekak dapan ko white space enne page height ekata wada aduwen content thibila da nathnam scroll eken passeth enawada ?

Full code. - https://justpaste.it/87imu
------ Post added on Sep 27, 2021 at 9:04 PM

 

[dakshinasd]

.pin_container {
100px auto;
padding: 0;
width: 3096vw;
height:100vh;
/* position: absolute;
left: 50%;
transform: translateX(-50%); */

display: grid;

grid-template-columns: repeat(auto-fill, var(--card_width));
column-gap: 15px;
/* grid-auto-rows: var(--row_increment); */

height: inherit;
justify-content: center;
align-items: center;
/* background-color: black; */
}

 

[TNHM]

width: 3096vw;

අවුල තියෙන්නේ මෙතන. දැන් හදාගන්න. කොහොමද කියලා අහන්න එපා/.

 

[san2d3]

.pin_container {
100px auto;
padding: 0;
width: 3096vw;
height:100vh;
/* position: absolute;
left: 50%;
transform: translateX(-50%); */

display: grid;

grid-template-columns: repeat(auto-fill, var(--card_width));
column-gap: 15px;
/* grid-auto-rows: var(--row_increment); */

height: inherit;
justify-content: center;
align-items: center;
/* background-color: black; */
}

width: 3096vw;

අවුල තියෙන්නේ මෙතන. දැන් හදාගන්න. කොහොමද කියලා අහන්න එපා/.

Ado thanks mcn. Oya pixel da? 1620k dunnama harigiya.

 

[KSPathirana]

3096 viewport width?

Ado thanks mcn. Oya pixel da? 1620k dunnama harigiya.

 

[Lakshan-Seram]

Ado thanks mcn. Oya pixel da? 1620k dunnama harigiya.

vw kiyanne relative to 1% of the width of the viewport.

100vw kiyanne window (viewport) eke width eka

pixel nam 1620px kiyala denna.

eth oya basic px values dena eke drawbacks godak tiyenawa.responsive support karanne na podi screen wala.

 

[san2d3]

3096 viewport width?

vw kiyanne relative to 1% of the width of the viewport.

100vw kiyanne window (viewport) eke width eka

pixel nam 1620px kiyala denna.

eth oya basic px values dena eke drawbacks godak tiyenawa.responsive support karanne na podi screen wala.

Thanks macho.

 

[KSPathirana]

https://developer.mozilla.org/en-US...ing_blocks/Sizing_items_in_CSS#viewport_units

Kiyawahan machan.

 

[kolavari]

Ela ela...problem sorted neh

Elakiri eke onna css dial tika mark karala thiyaganna

 

[hodakolla]

BUMPER

 

[NRTG]

BUMP