Making a site responsive

I am having a serious challenge in making site responsive across devices. What is the easiest way to achieve this goal going forward? I want to have this issue settled in my mind once and for all. Thank you

Hey there,

I do the mobile view first, mostly a flexbox column layout.

Then I increase the width step-by-step and add some spacing left and right.

This approach decreases the probability that I try to do fancy stuff on the wide view that isn’t user-friendly on the mobile view, and that I over-engineer stuff and waste time.

1 Like

Start at mobile view first, make use of flexbox and then use media queries to determine the layout for each viewport. This is a list of the media queries I make use of. You can make use of google chrome to check the respective viewports as you build.

@media (min-width:320px)
@media (min-width:481px)
@media (min-width:641px)
@media (min-width:961px)
@media (min-width:1025px)
@media (min-width:1281px)

1 Like

Thanks Miku…I’ll try to implement this today

When you say I should start with mobile view, does it mean I will have to design for mobile, tab and pc views all separately? Where do I input these queries?