Streaming live at 10am (PST)

What's a good container (Div Block) max width to accommodate for most screens?

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.

Hey @rohitalexander,

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

2 Likes

Hi there.

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 width in % and a max-width in pixels.

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.

Cheers,
Aditya

2 Likes

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! :smiley:

You said it. :ok_hand: