Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Web Typography Responsive Text and Vertical Rhythm: Part 1

Dean Onizuka
Dean Onizuka
4,753 Points
Posted by Dean Onizuka
Dean Onizuka
4,753 Points

where did the 58% max width come from

is there some kind of equation that he got the 58% from?

Andrew Gay
Andrew Gay
20,893 Points

Jarrod Brooks I like your answer a lot better as it is more relevant and explains more regarding Guils video. Please submit it as an answer instead of a comment!

2 Answers

Jarrod Brooks
Jarrod Brooks
5,071 Points
Jarrod Brooks
Jarrod Brooks
5,071 Points

It looks to me like he used 58% to get as close as possible to the look and feel of 600px width when the screen size is less than 980px. The base calculation for this is: 600px/980px ="61.2%". However, the text flows awkwardly at 61.2% and lacks the rhythm and design being targeted. Bringing it down to 58%, you can see that the text flows nice and evenly and there are not as many strange breaks. He does not say it in the video directly, but my guess is he took the base calculation and adjusted it slightly using his "eye for design" as a the deciding factor.

In other words, he "fiddled with the percentages" and adjusted it slightly to get the look he was after.

Andrew Gay
Andrew Gay
20,893 Points
Andrew Gay
Andrew Gay
20,893 Points

The fixed with of the wrap div is set to 600px.

In the video he explains how this negatively effects mobile devices because it is a fixed value causing smaller devices to be unable to render the text properly. He decides to switch the max-width property with a percentage value to prevent any negative user experience across platforms.

The percentage value I would assume was developed by getting the max width of his computer screen and subtracting out the width of the white space between the text.... he does not explain it in the video but lets say you computer screen is 1440px wide and the white space between the left and right of the text totals to 440px. that leaves you with 1000px of space where the text is contained in. If you define the width of that container to be 1000px on any devices smaller than 1000px wide will not be able to view the containing information properly, so instead you can change the width of the element to a percentage.

1000/1440 is about %69 of the screen.

By changing the max width of the element to a percentage you will now see that on all devices the text will take up a viewable amount of space regardless of size... (Depending on a few other variables.)

Sorry if this was not a great explanation but I hope it helps some!