Img goes black on screen when @media screen and (max-width: 415px)

Hello,
I hope you’re are well and healthy :smiley:

I’m trying to make my landing page as responsive as possible and i’m now styling the @media screen and (max-width: 415px) part. Why do I get the black screen where my img is supposed to be? How do I revert the product info with form buttons and the img , so the product info is the first element?

I’m less than satisfied with my nav element. Does it look ok or how cold I make it look better?

Thx in advance and I wish you a great week :slight_smile:

The first thing I would work on is getting rid of the horizontal scroll bar. I’m getting one even with a very wide view port width. My suggestion would be to narrow your browser as skinny as it can go and style the page to look good at this skinny width (no scroll bar hopefully). Use this as your base CSS. Then gradually widen your browser until you feel you have enough horizontal space to rearrange some of the elements and set your first break point there using min-width and em units. Repeat this process as much as needed.

Basically, use a narrow-first approach and make sure you never get a horizontal scroll bar.

1 Like