What’s a good max width for a div block (used as a container) to accommodate most display screen sizes other than the standard Webflow 940 px container? Considering now that an (say) iMac Retina screen resolution is 5120 x 2880 px which is a pretty large screen size.
do not (yet) rely on screen resolutions like the new iMac 5K. These resolutions may be used by 0.02% of Internet users and should not be your benchmark for setting up a container. Also, note that the larger the container, the larger the content needs to be.
I usually always recommend a width of 1440px with a maximum width of 100% if the container should be as large as possible, otherwise I usually use 1140px and the same maximum width as the first one.
I hope this helps you. Otherwise please contact me.
With best regards
Dennis from Vibrand Design
I’ve had these exact questions back when I started designing and developing using Webflow. Over the years, I’ve realized that the best practice while sizing width of containers/divs storing your content is to give them a
% and a
For example, I would give a div
width: 75% and a
max width: 1440px while keeping it centered and height set to auto. This way, screens as tiny as 13 inch laptop screens as well as the large 27 inchers all have a decent amount of space to the left and right while the content nicely fits in the middle. You should definitely try this approach. I think you’ll be happy with it.
This does make a lot of sense. Thanks Aditya. Do you think for that config you mentioned, on mobile though showing 75% only of the width will leave a lot of white space on the sides?
Sure, I hear ya. It was just so that I could explain it for worst case scenario.
so width: 1440px and max width 100%? I would have to give separate margins as well to yeah? How about if I reverse it and give a max width of 1440px and width in % like how @aditya1 has mentioned in his comment. Do you think that’s better?
Thank you for your response.
For tablets and mobiles, I simply set the width to 90 or 100% and give it a left and right padding of 20 or so pixels. The above approach was for desktops. Works like a charm!
You said it.