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 trialHerschel Greenspan
890 PointsWhat did i do wrong here?
How did i mess this up?
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;
}
#gallery li {
width: 28.3333%;
@media screen and (min-width: 480px)} {
}
3 Answers
Chyno Deluxe
16,936 PointsAhh! ok. I didn't know exactly what your problem was. but in that case your code should look like this.
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
}
Chyno Deluxe
16,936 PointsThe very end of your code is what I assume is the cuase for whatever problem you are experiencing.
#gallery li {
width: 28.3333%;
@media screen and (min-width: 480px)} {
}
<!-- CHANGE TO THIS -->
#gallery li {
width: 28.3333%;
}
@media screen and (min-width: 480px) {
}
Herschel Greenspan
890 Pointsi tried that and its not working. its asking me if i added the width rule inside the break point? what does that mean?
damian celentano
3,822 Pointsit means the width rule inside/within the media queries {} do this:
@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; }
}
Herschel Greenspan
890 PointsHerschel Greenspan
890 Pointsexcellent. thank you very much.