page width extending
i'm in the beginning process of starting my page, though i saw the width is overflowed and extended. i can't seem to spot what or where is making it overflow. would anyone know how to fix it?
21 Replies
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
don't use 100vw
really try not to set strict height/width period
let your content/children be free (determine the size)
i removed both height and the widths set and it's still extending
best if you put it in a codepen example for others to debug
We can't see what you see
seems good?
hm
I mean you hit overflow about 500px cause of your grid but otherwise seem right
it is now
that's so odd, maybe it just didn't fix in my browser?
i kept reloading after changing in my code
whoops mb
refresh could be cache idk how you are serving the code locally
i actually did have a question about grid layouts though. apologies for the questions as i am still a beginner, it's most likely very simple questions i have lol
grid ❤️
you should probably make a new post but shoot >.>;;
is there a way i can specifically set the width of columns and what not? i'm trying replicate the interface of instagram feed layouts, and i can't seem to get it to span the right way
you are doing it here
grid-template-columns: 200px 100px 100px 100px;in mine, i'm trying to get the follow button to span beneath the photos, followers and following, then have the bio span completely below the pfp and follow button. this is what i have so far:
yeah
oh gotcha yes
owuld it be possible to set it all to 100px, then would i have to use positioning and z index for it to span over the 100px cols?
on the child element you can specifiy which cols its in or if it spans
so like followers you could add
well really you could just put span 3
but that is the idea for the emojis too so if you needed to start
3 / span 2
Or you can be specific to which lines to start / end on
grid-column: 1 / 3
https://css-tricks.com/almanac/properties/g/grid-area/
grid area/names/named lines is where the power of grid really takes hold.ahhhhhh
