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 trialShandale Shelton
7,424 PointsResponsive design for web page is not responding.
Hello I believe that I am stuck i have entered the code exactly as instructed and no change to my web page for the responsive design. I know its a bug in here some where I just can't find it. please help!
@media screen and (min-width:480px) {
/************************* TWO COLUMN LAYOUT ***************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/************************* PAGE: PORTFOLIO ***************************/
#gallery li { Width: 28.3333; }
#gallery li:nth-child(4n) { clear: left; }
/*************************
PAGE: ABOUT ***************************/
.photo { float: left; margin: 0 5% 80px 0; }
} @media screen (min-width: 660px) {
/*************************
PAGE: HEADER ***************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: right;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
1 Answer
Jake Salo
13,175 PointsHi Shandale, your code looks fine at first glance - the first thing that popped out to me was in your 'page portfolio' section.
/************************* PAGE: PORTFOLIO ***************************/
#gallery li { Width: 28.3333; }
#gallery li:nth-child(4n) { clear: left; }
The fact that width is capitalised shouldn't affect it, but change it anyway just to be safe. But the main bit being that you didn't include any units for the value - 28.3333px? %?
/************************* PAGE: PORTFOLIO ***************************/
#gallery li { width: 28.3333[UNIT]; }
#gallery li:nth-child(4n) { clear: left; }
Try changing these and tell me if this works, if not i'll have a deeper look at your code :)
Good luck.
Shandale Shelton
7,424 PointsShandale Shelton
7,424 PointsThanks Jake for getting back to me I really appreciate it. looks like those changes didn't have a affect on the web page i tried retaking my steps to go along with the video but no luck.
Jake Salo
13,175 PointsJake Salo
13,175 PointsAlright then, the next thing i just noticed is that you didn't include the 'and' keyword in the 660px media query:
@media screen (min-width: 660px) {
Try adding the 'and' keyword between screen and open parentheses:
@media screen and (min-width: 660px) {
Shandale Shelton
7,424 PointsShandale Shelton
7,424 PointsThat looks like that has done the trick thank you sir!