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 trialnicolai kristensen
2,316 PointsImage gallery keeps breaking!!
My image gallery keeps breaking into weird forms so that the 9 goes before 6 and so on, whenever i crop the page in, it happens from tablet to mobile section.. I followed the coding exactly as he explained. I double checked every spelling. Here is the css and responsive css
css:
#GALLERY {
margin: 0;
padding: 0;
list-style: none;
}
#GALLERY li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#GALLERY li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
Responsive:
@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.33333333333%;
}
#GALLERY li:nth-child(4n) {
clear: left;
}
}
@media screen and (min-width: 660px) {
}
and btw the mistake is not that i write #GALLERY with capital cause that is my id for the gallery photos, please help
3 Answers
elk6
22,916 PointsHi Nicolai,
You are missing a semicolon after left in your portfolio section.
#GALLERY li:nth-child(4n) {
clear: left
}
}
nicolai kristensen
2,316 PointsEditet the clear: left; in the question but it was not the mistake :)
nicolai kristensen
2,316 PointsThanks for the input, unfortunately that was not the error.. it still doesnt make any changes still collapses together and forces it into some weird placement in the photo section..
nicolai kristensen
2,316 PointsNo one her to participate in solving this? :)
nicolai kristensen
2,316 Pointsnicolai kristensen
2,316 PointsI cant make it display better.. dont know how i make it look like that coding form