Fully Responsive Page/Website with Bootstrap and Media Queries

Hi guys,

I am a bit struggling with the whole responsive part of my projects.
I can manage to make my page almost fully responsive by writing tons and tons of media queries, basically to handle every single case/device possible which actually takes a lot of time and also doesn’t work perfectly anyway (manual resizing breaks everything… ).

It does not feel right to do this like that, but in the meantime I cannot come up with a way to be able to handle every single device at the same time without doing a lot of extra media queries.

What your thought process when you start a page from scratch when it comes to making it responsive?
From what I understand, every page is quite unique regarding the differents breaking point, but how do you come up with a solid set of breaking points for your specific page?

Thank you in advance :slight_smile:

You let the content tell you where the break points are.

You’ll want to use what is referred to as a “mobile first” approach. But I actually think of it as “start narrow and work your way wider”. Don’t worry about specific devices and such. Follow these steps:

  • Narrow your browser as skinny as it will go and style the page so it looks good at that narrow width. This will be your base CSS.
  • After everything looks good at the narrow width, slowly widen the your browser until you feel you have enough horizontal space to rearrange some elements for a wider view port. This will be your first break point. Use min-width and em units for the break point. Add your new “wider” styling under this break point.
  • Continue widening/adding additional break points as needed.
1 Like

Thanks for the answer, this helps a lot.

I just have another question, should I build my page first without caring about responsive?
Then when it’s done, I use what you’ve just explain to me ?
Or I build a Component and I make it responsive right away?

If you do what I suggested above then you are by default building your page to be responsive. If you always start as narrow as possible and work your way out then your page will automatically be responsive.

So just do the “narrow first” approach and you won’t even have to ask this question :slight_smile:

I think I get it, I’m going to give it a try :slight_smile:

Thank you