Make webpage responsive to all screen sizes

1

I’ve got quite a few website projects that aren’t yet responsive to every screen size. What should I do? Thanks.

2

If you’re trying to squeeze things into say 360 px and then 375 px you’re approaching it incorrectly.

Rather than trying to make your code squeeze into every single breakpoint you can think of take a pragmatic approach.
The best method to ensure that your page is mobile friendly is to use a narrow-first approach when creating your page. At the very beginning of the process, narrow your browser as far as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). You are not using any CSS break points at this time. You will most likely not need a bunch of fancy layout code (using flexbox or grid) because for the most part you’ll want everything to naturally stack on top of each other in a single column (such as the three bag boxes at the bottom). Your CSS will be rather simple at this point, and that’s OK. This will be your base CSS.
After you have your page looking perfect in this narrow view then you can gradually widen your browser until you feel you have enough horizontal room to move things around for the wider view port. This is when you will set your first CSS break point (place it after the base CSS). Use min-width and em units for the break point. Add any styling changes for the wider layout inside the break point (e.g. adding flexbox/grid to move things around). Repeat this widening/adding break points process as needed.
It is almost always easier to start narrow and work your way wider. Your CSS will be simpler and easier to understand. For wider views you may find that you need to add extra wrapper <div>s and such to help with styling. That is perfectly fine. But always remember to go back and check your narrow view to make sure you didn’t break anything and adjust the base CSS as needed. For simple layouts like this you will find that you will actually need very little CSS for your wider view break point.

1 Like
3

Here are som responsive web design basics you need to know

  • Set the viewport
  • Ensure an accessible viewport
  • Size content to the viewport
  • Optimize Images
  • Layout
  • Use CSS media queries for responsiveness
  • Media queries based on viewport size
  • Media queries based on device capability
1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.