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 trialJoshua Smith
7,237 PointsI've added the width rule inside of the break point, but it says I haven't. Please help.
I'm taking a code challenge where it asks me to add a width of 28.3333% inside the media query. When I do, it asks me if I've added the width rule.
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) {
}
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
3 Answers
Abe Layee
8,378 PointsYou forgot to put your code into curly bracket. Make sure your code always go between the opening and closing bracket. Like this
@media screen and (min-width: 480px) //opening bracket here{
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
}//closing bracket end here
Joshua Smith
7,237 PointsThank you so much! Was driving me nuts!
Abe Layee
8,378 PointsYou're welcome bro.
Mindy Sandilands
15,743 PointsIt looks like you have a simple syntax error with one two many curly braces within your media query function. Delete the curly brace before this line:
gallery li {
width = 28.3333%; }
Hope this help! Mindy
Nurul Ahsan
2,039 PointsNurul Ahsan
2,039 Points@media screen and (min-width: 480px){
gallery li {
max-width: 28.3333%; }
}