## 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.

# Percentage 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%;
}
```

}

I was using the target รท context = result formula covered in these videos.

Hope this helps.

Thanks 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.

Patricia 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.

Where 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.

Short Answer: Because that's the width that Guil Hernandez decided to use as the context for all of his calculations.

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

Oh! 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!

STAFF

Thanks 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.