Kevin Powell - Community•4mo ago

Content Width on Websites

I'm curious why content on certain websites doesn't expand beyond a certain width on larger screens. Is this intentionally designed as part of responsive design, or is there another common practice for controlling the maximum width of content?

5 Replies

ghostmonkey•4mo ago

it's intentional, and usually referred to as a 'container'. On very large screens, it becomes harder to read text that stretches all the way across or to have your menus all the way to the far right/left of the screen

francis•4mo ago

@ghostmonkey Is there a specific width size recommendation, or is it based on individual preferences?

13eck•4mo ago

If you do a web search fro "optimal line length" you'll get: * 45–90 characters per line * 50–75 characters per line * 50-70 characters per line * 60-80 characters per line One thing they almost all agree on is aiming for 60–66 characters per line. I much prefer to set the max width to 60ch (ch being the width of the 0 character in the current font size/family). I like to set the container width like this:

.container {
  // sets the width to be the smaller of
  // 60ch or 2em short of full width
  width: min(60ch, 100% - 2em);
  // centers the container with at least
  // 1em of margin on each side, thanks to the
  // `width` above
  margin-inline: auto;
}

.container {
  // sets the width to be the smaller of
  // 60ch or 2em short of full width
  width: min(60ch, 100% - 2em);
  // centers the container with at least
  // 1em of margin on each side, thanks to the
  // `width` above
  margin-inline: auto;
}

One of the nice things of using 60ch is that you can easily sub-divide it for smaller or larger containers: * 1/2 is 30ch * 1/3 is 20ch * 3/4 is 45ch * 2/3 is 40ch * 1.5 (or 3/2) is 90ch Nice even numbers for a majority of fractional sizes.

ghostmonkey•4mo ago

if you are only speaking about text content, then exactly what Beck wrote is how I work. I find 60ch to be really great for body copy type text, and maybe a little less if I am doing titles If you, you are talking about the entire web site being 'contained' in an area in the center of your larger screen, I generally use the 'max-inline-size' property, and set it from anywhere between 1440-1800px total, depending on what % of the site traffic is coming from phones versus desktops

clevermissfox•4mo ago

Using ch for max-width does depend on font-size and typeface as well as your content, what looks good on THAT page ? When are the line lengths getting too long? But as Francis and ghost said, it's called a wrapper or a container and you'll see most sites have one to keep all the content from stretching past a certain breakpoint and centered. 60ch a good place to start from and then adjust as needed for your project. I like the reasoning behind the "60" over 45 or 90 etc. If you haven't checked it out yet, watching KPOWs course Conquering Responsive Layouts could be helpful to you https://courses.kevinpowell.co/conquering-responsive-layouts

Kevin Powell

Conquering Responsive Layouts

Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!

Gaming

Programming

Content Width on Websites