CSS is frustrating! AHHHHHH

[troyb16]

Okay so I’m trying to make sure my portfolio page is responsive starting with mobile view first but no matter what I try there is some strange behaviour when the width gets really small. How small of width are we suppose to account for? Because at a certain point there’s no one with devices that small and skinny. For instance see my picture:

This is at 200px wide. View is in inspect mode in browser not CodePen.

CodePen: https://codepen.io/troy_b16/pen/gOXRxRO

If I change the body viewport width to 100vw it seems to solve this issue but then the problem is the page always has a scroll bar horizontally at the bottom that scrolls the tiniest amount, completely pointless. I can’t seem to solve one issue without creating another, not having the scroll bar at the bottom of the page and responsive down to the smallest width I could image anyone ever needing… like what is this… a screen for ANTS?! (dating myself with this joke I know, not dating like a relationship, like date but not the big raisins kinda date, time… you get it? I’ll shut up now.)

Anyways, rant over. Someone help my n00b coding brain

[Roma]

I think the smallest phone screen right now is one of the iPhone’s at about 320 pixels.
Do you really need to go smaller?

For the projects I would say narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.

[troyb16]

In inspect mode I noticed the smallest width is from the Galaxy Fold at 280px and my page is experiencing the same issue there. The page seems to have white space to the right until about 355px but again I can solve this by setting the body min-width: 100vw; but then there is always a horizontal scroll bar that shouldn’t be there.

[jenovs]

To get rid of scrollbar in CodePen select: CSS Settings → CSS Base → Reset.