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
hl9
8,443 PointsWhat pixel widths did Guil use to determine these percentages?
Hi,
Could someone please show me how Guil determined these percentages? I couldn't see any widths in pixels defined anywhere in the stylesheet, and don't we need these to determine the percentages? I must be missing something O.o
Here's the css from the workspace:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 25px;
background: #ECF0F1;
color: #FFF;
font: 1.3em/1.6 sans-serif;
}
.wrap {
margin: auto;
width: 90%;
}
.main-header {
background: #34495E;
text-align: center;
}
.logo,
.main-nav a {
display: inline-block;
color: #FFF;
text-decoration: none;
}
.main-nav a {
padding: 0 .75em;
border-right: 1px dotted;
color: rgba(255,255,255, .8);
font-size: .7em;
line-height: 1rem;
}
.main-nav a:hover {
text-decoration: underline;
}
.main-nav a:last-child {
border-right: none;
}
.content,
.main-header {
overflow: hidden;
}
.col {
height: 240px;
}
.main {
background: #3498DB;
}
.secondary {
background: #2ECC71;
}
.extra {
background: #E74C3C;
display: none;
}
.main-footer {
background: #95A5A6;
}
.main-header,
.main-footer,
.col {
margin-bottom: 15px;
padding: 2.15%;
border-radius: 5px;
}
/* ==========================================================================
Media Queries
========================================================================== */
/* Phones to Tablets*/
@media screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
}
.secondary {
width: 31.914893617021%;
margin-left: 2.127659574468%;
}
}
Thanks for the help with this,
Heath
7 Answers
Chris Wiley
11,327 PointsThe context width is most likely going to be your viewport or container. To see how many pixels Guil used for the target, let's assume the viewport to be 1024px across You can take the percentage and multiply by the viewport(context) to get the number of pixels for the target. .65957446808511 x 1024 = 675 pixels. If you only have the target and the percentage then add a 1 onto the percentage before multiplying and you can reverse engineer the screen size.
Guil Hernandez
Treehouse TeacherHi there, hl9
In the "Adaptive Layouts" example, the column widths and margins all add up to 100%. So in a 1000px context, .main would be equal to 660px,.secondary would be 320px, and the left margin 20px.
What's great about working with % is, once you have your values in place, you can pretty much define any width as the context and everything adjusts accordingly.
Carol Dew
5,923 PointsGuil, thanks for this, and I have watched the video for calculating percentages based on context and pixels, and I think I understand that, but I'm still confused about how the values in this particular video were obtained.
If we use the 1000px context as given in your answer here, then these are the values I'm getting:
.main's width = 660/1000 = 66% .secondary's width = 320/1000 = 32% margin-left's width = 20/1000 = 2%
No decimal points, and it makes perfect sense to plan the layout like this ... however, in this video, these are the widths:
.main : 65.957446808511% .secondary: 31.914893617021% .margin-left: 2.127659574468%
Don't we need to know the pixel widths for .main, .secondary, and .margin-left, as well as what you used for the context (was it 1000px or 481px?) before we can get the percentages that you get in the video? They're not in the CSS, and they're not given in the video.
I tried to "reverse engineer" the maths here, by using 481 as the context. I'm not all that great at maths, but the way I figure it, since .wrap takes up 90%, its pixel width in a viewport of 481 pixels would be 432.9 pixels. Already an impossible width to declare; much less the 285.529785102 pixel width for .main, obtained from using 432.9 * 65.957446808511%.
I am well and truly stumped as to what the pixel values and context were for the percentages obtained in this video (and the next one), and I'm feeling really stupid here. Please can you enlighten me?
Thank you!
elk6
22,916 PointsHi,
The body is of the page is defined to 100% browser width. Anything below that will take the width in percentages of its parent container. So, if you make a div that has a width of %, it will take up 50% of the 100% browser width. If you put an image in that div with a width of 40%, it will take up 40% of the div's width which is taking up 50% of the browser width. And so on.
Hope that clarifies things a bit.
elk6
22,916 PointsOkay, the width of the browser is actually your pixel size here. Maybe that makes things a bit more clear.
Let's say your browser size is 1000px wide. The first declared thing in the css is the .wrap div. Guil set a width of 90% to it so the width of the .wrap div is 90% of your browser width. 900px in this case.
Now let's say you create a new div with a class of example next ( that's not what Guil did but i use it as an example ) and you give it a width of 50%. That div is inside of the .wrap div so it will take up 50% of the .wrap div. That div is taking up 90% of your browser size. So the .example class would take up 450px So:
Browser size = 1000px .wrap div width = 90% / 900px .example div width is 50% ( of the .wrap div ) / 450px
If you put up a new div inside the .example div it with a width of 50%, it would take up 50% of the .example div. So 225px in this case.
hl9
8,443 PointsThanks very much for your help, Elian, appreciate it
Chris Wiley
11,327 PointsIf you add all of the percentages up they total 100%. You want to use the entire width of the browser responsively. So if you take your browser off full-screen and grab the side of it and drag it narrower or wider the margin and two columns adjust proportionately to the screen size. If you use a pixel definition it will not adjust and you will not see the entire width of your page as the screen narrows.
hl9
8,443 PointsHi Chris -- Thanks for taking the time to help me with this, still working on getting it!
Guil Hernandez
Treehouse TeacherHi there, hl9. Hopefully this video helps explain the pixel to percentage conversion.
hl9
8,443 PointsThanks Guil! Yeah, that's what was tripping me up. I didn't know what pixel widths to work with in order to be able to do the conversion:
___(target width in pixels) ÷ ____(context width in pixels) = 65.957446808511%
I'll have to watch the video again to see if I missed the pixel values.
Chris Wiley
11,327 PointsGlad you got the concept. I just want to add that based on your percentages to me and the original code you posted that your decimal points are not shifting properly as you switch from decimal numbers for calculation and percentage numbers for expression in the code and communicating with others. Make sure the 6.5% is expressed as .065 in decimal representation with the two place decimal shift to the left when dropping the % symbol and reversing that going back. It's common error I constantly have to double-check myself for.
Happy Coding