More Feedbacks-Responsiveness!

Sooooooooo…Help Please!

Regarding Responsiveness, is there more I need to do? I feel like I’m missing something but I don’t know exactly what it is I might be missing…

https://codepen.io/shaniakond/full/PoGBQGj

It’s not properly responsive if you are getting a horizontal scroll bar, even at narrow browser width.

I would suggest that you narrow your browser as far in as it will go and style the page to look good at that narrow width. Don’t use any break points. This will be your base CSS.

After you have the above working (with no horizontal scroll bar) then you can gradually widen your browser until you feel you have enough room to rearrange things for a wider view port. This is where you will put your first break point (using min-width and I suggest em instead of px). Add the additional styling for the wider view port under this break point. Repeat as necessary.

thank you for responding @bbsmooth.

So that’s where I am stuck. What do I need to do to prevent the horizontal scroll bar? Which area within my CSS do I need to identify to solve the horizontal scroll bar? Which properties do i need to work more/less on?

I really recommend you sort of start over with the narrow-first approach I described above. It is almost always easier to start narrow and then add additional styling for wider view ports.

The other thing I would recommend is that you get rid of all the widths you have set using CSS. You don’t need them at all for the narrow view and I don’t think you’ll need them for the wide view either. All of the elements you have set a width on are block elements, so they automatically take up as much of the width as possible. And some of the widths you are setting are contributing to the horizontal scroll bar issue.

I would however recommend you use max-width to keep the line length from getting too wide (for example, the quote near the bottom).

1 Like

started all over again 20 mins ago :rofl:
I’m starting to see why it’s easier to start with a narrow view.
Thank you!