So we know the majority screen sizes research already, enter image description here

But what are the optimal max-width suggestion for the container in each of screen sizes?

I can only find a suggestion report like this, enter image description here from here:http://www.visionefx.net/website-pixel-width-safe-area.htm

How you think? what are your suggestions or what you are following?

  • I just reviewed the recent questions, because I recall a very similar one in the past few days—but I cannot find it. Sorry. It had some great responses.
    – JeromeR
    Dec 2, 2015 at 11:45
  • oops, could you give a keyword?
    – bard
    Dec 2, 2015 at 11:52
  • I'm confused. Why are screen resolutions important here? I mean, why not just got the responsive approach and accommodate for all screen sizes? Just design to bootstrap's standards.
    – UXerUIer
    Dec 2, 2015 at 15:06
  • What is the underlying problem you're trying to solve? 'Safe' area widths might be useful in creating pixel-perfect PSD's, but in developing CSS you want to design responsively, not limit yourself to fixed container widths. Aug 14, 2017 at 17:30

1 Answer 1


Never design any element to any screen size cause, eventually, another will come out or take its place. Make your design responsive and adaptive to changing widths. When it starts to look like crap, that is your breakpoint.

Doing it any other way is impossible and will only drive you crazy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.