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
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsMax-width: 940px
I am revising this section as I have started building a website. I have realised that when I was doing all my CSS I was determining measurements of width and length by keeping my eye on the screen of my 13 inch Macbook pro and resizing until I thought my divs fitted into it, but now I am realising that there are pre-determined sizes for width and height before you do responsive. Like in this tutoral we start off with max-width 940px. Why is that so? Should I also set my max-width into this same size for a starter? I hope my question is clear as this important for me. Kindly assist with an answer if you think you can.
8 Answers
Luca Argenziano
16,416 PointsOk, you're starting making a bit confusion about container's purpose. The height of a container is determined by the contents inside it, you don't have to set it manually. Say you have a container with an image inside that is 300px tall; well, you will have a 940x300px container on the screen larger than 940px. For responsive best practice.. well, percentage is a bad solution for global wrapper, pixels are ok, but better than that are ems and rems.
Ems refers to the nearest parent that have a px dimension:
body {
font-size: 16px;
}
.container {
max-width: 58.75em; /*this set the max width to 940px (58.75 x 16 = 940) */
}
Rems refers to device resolution.
Luca Argenziano
16,416 PointsHi Christopher, I think I can help you. Setting a max-width of 940px for a container, for example, is useful if your site will be visited on large screen. You don't want your UI to span across the full width of a 4K, 60" display (for example), so you could wrap all your contents inside a container that, when the device width hit 940px, stop scaling up and maybe goes centered. If you're running OS X El Capitan, in Safari you should be able to see the Responsive Inspector under the Development tab in the menù in the menù-bar; try to wrap your site in a max-width: 940px container and look at what happens in the 1920x1080px resolution. You may also want to add margin: 0 auto; to center the container in the middle of the page.
Luca Argenziano
16,416 PointsGreat ;-) so the shortcut is alt-cmd-r, and if you try it on this page and go to the 1920x1080px you will see that the container of this page has a 1430px max-width ;-)
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsWhat are those percentages I am seeing in the responsive inspector like in 1920 x 1080 there is 48% on the top left is that the max-width of the container for this page?
Luca Argenziano
16,416 PointsAbsolutely no! You are probably viewing the 1920x1080px aspect-ratio on a screen that is smaller in pixel; so Safari scales down the 1920x1080px resolution by 48% for let you see it in a smaller screen. It doesn't interact with the website code. You could try to resize the responsive window (there are 4 resizing point, one for each side) to better understand what happens with that percentage at different resolutions: obviously, if you match your real Safari-window-size, the percentage will be 100%. ;-)
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHi Luca, yes I am using El Kapitan, I think I understand what 940px now represents. Let me try it and see how it goes, maybe I will be back again with more questions. And thanks a lot.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks for the information Luca, one last question, if width is 940px, is there any set size for heights or I just go with any numbers I want?
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsLol I have too many questions, another quick one, do I use pixels or %'s in responsive? these things are keeping me awake at 3am :)
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks Luca this is very useful! Let me see what I will come up with on my project. Stay blessed for your patience!