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!
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
Kern Tallett
10,012 PointsResponsive Design: Media Queries
How do i make it so .menu and .contact take up 100% width of the layout of the 480px display?
I feel that based of the example i need to include all the grids and layout containers before i start the changes yet i cant find them or at least i dont understand how to type them in and layout. The video previously wasnt too clear as it was mainly copy and paste and little explanation. If you can direct me to more information that would be great and give me a tip on this.
<!DOCTYPE html> <html> <head> <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css"> <style> body { background-color: #420600; color: #FAF3BC; font-family: 'Nunito', sans-serif; font-size: 1em; font-weight: 100; } img { margin: 2% 0; max-width: 100%; } h1 { font-weight: 100; font-size: 2.25em; margin: 5% 0; } h2 { font-weight: 100; font-size: 1.500em; color: #B4C34F; } h3 { font-weight: 100; font-size: 1.25em; color: #4FB69F; } h2, h3 { margin: 0; padding: 0; } p { margin: 5% 0; } strong { font-weight: 300; color: #B22316; } div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox / -webkit-box-sizing:border-box; / Safari */ } #container { max-width: 100%; width: 1000px; margin: 0 auto; } .menu { width: 60%; margin: 0 0 2% 0; float: left; }
ul.prices {
font-size: .75em;
list-style: none;
padding: 2% 0;
margin: 0;
}
.prices li {
float: left;
width: 33.3333333%;
}
.cupcake {
border-bottom: 1px dotted #FAF3BC;
padding: 5% 0;
}
.cupcake p {
margin: 0;
}
.cupcake:nth-child(2) {
border-top: 1px dotted #FAF3BC;
}
.contact {
width: 35%;
margin: 5% 0;
padding: 3%;
float: right;
background-color: #2e0400;
border-radius: 15px;
}
.contact span {
color: #B22316;
font-weight: 600;
}
/* Mobile ----------- */
@media screen and (max-width : 480px) {
#nav .contact {
width: 100%;
}
#nav .menu {
width: 100%;
}
}
Kern Tallett
10,012 PointsI will be honest Adam, i am still stuck if you would be kind enough to explain. I guess you are saying that the display has no grid layout etc so is therefore a block. I do not then understand how to write that in html or if i am doing something else wrong. I have googled the problem as well as i can yet i am still stuck.
Adam Sackfield
Pro Student 19,663 PointsYeah sure would be happy to help. Post what code you have now to codepen.io and put the link in here and i will talk you through it
2 Answers
Kern Tallett
10,012 Pointshttp://codepen.io/Kern-Tallett/pen/dzxsk
Thanks a lot. I really appreciate it. Do i need the margins/padding/ taken away? Do i need to declare the size of the font? Plus still am unsure as to the layout i am trying to change. I simply cant work out how to find out in the code provided.
Adam Sackfield
Pro Student 19,663 PointsIn your CSS where you have the media query for 480px you had the #nav and .nav before the .menu and .contact and this was preventing the styles from being applied the those elements as they were not inside anything called .nav or #nav. If you remove these it will put the menu to 100%. What else is you are not understanding. What videos have you watched so far?
Kern Tallett
10,012 PointsThats great, thanks a lot. Damn i actually completely understand that so i am a touch annoyed i didn't get it. I wasn't thinking enough about the example and was comparing too much to the current webpage. I have fully completed the Build a simple website and am up to this video on Building a responsive website. I now need to adapt the current website so it works with ipad as well as iphone and browser. I think i get what i need to do.
Adam Sackfield
Pro Student 19,663 PointsOk glad to hear it. I would recommend the HTML and CSS deep dives.
Adam Sackfield
Pro Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsDisplay: Block;