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 trialCurtis Bradshaw
7,917 PointsCode won't work for Media Query Code Challenge? Help?
Hello all. For Step 1 of the Code Challenge for Refactor the Layout. It keeps telling me that my code is incorrect even though I'm entering it exactly how it was written in the video. All it says is that I need to make the width 28.3333% if the browser is wider than 480px. Can someone help me out?
@media screen and (min-width: 480px) {
gallery li {
width: 28.3333%; }
}
Thanks!
@media screen and (min-width: 480px)
{
#gallery li
{
width: 28.3333%;
}
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
@media screen and (min-width: 480px) {
}
1 Answer
Kelly von Borstel
28,880 PointsIt looks like you have the same selector #gallery li further down in the css, which is overriding the width you set for #gallery li at the top of css.
Curtis Bradshaw
7,917 PointsI commented all of that code out and it still didn't work. When I took away the li from the gallery identifier, it magically worked so I'm not sure why it did that. Thanks for the response though.
Edgar Gil
13,322 PointsEdgar Gil
13,322 PointsCan you show your HTML CODE please.