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
Tricia Martin
19,604 PointsPercentage Calculation on Adaptive Layouts with Media Queries
I was just wondering what formula was used to calculate the widths of the columns in the Adaptive Layouts Deep Dive. I've tried messing around with it and can't get the same numbers.
@media only screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
}
.secondary {
width: 31.914893617021%;
margin-left: 2.127659574468%;
}
}
Tricia Martin
19,604 PointsThanks Guil Hernandez,
I have watched those and know that formula. I guess what is getting me is what specific numbers you were using since the only width that was set was the 90% for the .wrap div, and then the 481px & 769px for the media queries.
Maybe I just need some more coffee lol.
2 Answers
James Barnett
39,199 PointsPatricia Martin - If you use 980px as your context you can work out figure out what the target was in pixels by working backward with that formula.
Let us know if you are still confused.
Tricia Martin
19,604 PointsWhere does the 980px come from?
edit: Nevermind, got that part. My boyfriend always designs using the 960 grid system, so that is what I am used to. Still not getting 65.957446808511% though.
James Barnett
39,199 PointsShort Answer: Because that's the width that Guil Hernandez decided to use as the context for all of his calculations.
Long Answer:
If you look at the codepen for that badge
- you see there's only one width set in pixels that's in the last media query there's a
width: 980px; - so I plugged that into the formula
- worked out the widths in pixel values
- subsituted the pixel values for the precentage values on the codepen
Tricia Martin
19,604 PointsOh! I wasn't looking at the codepen. I was just following along with the downloaded project files, and didn't have that part in there. Thank you for taking your time to reply!
Guil Hernandez
Treehouse TeacherThanks James Barnett!
Patricia Martin – As James pointed out, it was based on a 980px context. But keep in mind that once everything is fluid, you can pretty much plugin any pixel value for the "context" and work backwards with the "target ÷ context = result" formula to get the pixel values for widths, margins, etc...
If you're still unsure, you can always take a look at the "computed style values" in the Chrome Dev Tools, for example, which are always defined in pixels.
Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherHi Patricia Martin,
I was using the target ÷ context = result formula covered in these videos.
Hope this helps.