Largest max-width for a container

HTML & CSS
1

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!

2

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
3

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
4

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,

5

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

6

Thanks for the feedback.

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

7

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.

8

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

9

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)

10

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