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.
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)
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?