Largest max-width for a container

Hi there,

I am using Bootstrap which is using a max-width for it’s largest container of 1200px. However, I have seen other websites appear larger than this, so wondered if this is a good idea to increase this, or is 1200 an ideal width? If I can go bigger, what would be the ideal max-width?

Any suggestions would be great, thanks!

Depends on your content.

If it’s all text, then I would recommend against going overly wide. Optimal letters per line is roughly 50-60 (source).

If you have other media and not just text, you can choose to go wider. Again, all depends on your content and your design.

1 Like

That would depend upon the size of the client screens you expect and the nature of your page design.
A block of text can start to look odd if it is too wide, as it decreases in height. But perhaps you have multiple columns of text, or perhaps it’s a page of tiled images, that may look fine in a wide container. Who knows?

1 Like

Thanks for the reply.

It is a mixture of text and images. There won’t be any sections where text would go full width from left to right,

So you could potentially go wider, keeping in mind the 50-60 character per line ideal.

Thanks for the feedback.

I am thinking of increasing it to 1440. Is that too large, or could I actually go larger?

Again, it comes down to content and readability. 1440 could be OK (seems a bit wide to me).

Tell you what. Try this in your css. Change whatever has content blocks in it to something like this which limits your content to a maximum of 65 characters.

div.content { max-width: 65ch; }

Then look at your content at the various widths, and the max text width should be a pretty good indicator of how wide your content should max out at.

The rule of thumb in this case would be: If it looks OK, it is OK.

Within a Flexbox ‘page’ container I use max-width to force flex items to wrap. Without max-width the flex items could appear on a large monitor as a thin wide row near the top of the browser window.

I also use max-width on the flex items to prevent excessively long lines of text. That is a separate consideration.

In deciding what value to use for the max-width of a ‘page’ container it makes sense to take into account what the content is like and how it would flow on large monitors.

(My default starting point is a max page width of 1500 pixels)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.