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 trialSusan Ortega
1,103 PointsImage gallery keeps breaking
Image gallery keeps breaking as soon as you start stretching out the page further. It looks fine at the mobile size, but when reaching desktop size 4th image doesn't stay in place it shifts down. I have copy/paste my reponsive.css code here. Any help with this would be great, since I can't seem to move further without fixing this issue.
@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
**************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 660px) {
/*************************
HEADER
**************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
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;
}
}
2 Answers
Jasper Leenarts
13,830 Pointsfound the fault. you can not have a space between li: and nth-child
Jasper Leenarts
13,830 PointsThe section under portfolio page probably needs to be in the 660px and above media query.
Susan Ortega
1,103 PointsSusan Ortega
1,103 PointsJasper Leenarts THANK YOU!!! Yes, it was the space I added btwn the li: & the nth-child. This absolutely fixed the problem. I appreciate all your help. Also, the reason I didn't put the section under portfolio page in the media query for 660px is because the video has it posted directly under the 1st media query. :)