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 trialHolly Holliday
1,563 Points"Inside the media query, select the list items inside the gallery and add a width of 28.3333%." Need help with question.
I know it's in a Gallery li which reads as follows in challenge
gallery li {
float: left; width: 48; margin:25%
I keep trying to change the width to 28.3333% Why is it not working? Thanks
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: 28.3333%;
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) {
}
Nurul Ahsan
2,039 PointsMr.Rich Donnellan, Thanks for asking question. Width of li inside the gallery should be fixed not over width:28.3333%; @media screen and (min-width:480px){
gallery li{
max-width:28.3333%;
} }
3 Answers
Rich Donnellan
Treehouse Moderator 27,696 PointsHey Holly,
It's asking you to add it to the media query section. Doing so will allow it to resize to this width if the window reaches a certain size.
Media query:
@media screen and (min-width: 480px) {
/*add rule here*/
}
Make sense now?
–Rich
Darren Kynaston
Courses Plus Student 15,610 PointsYou must place the new code inside of the media query:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
}
This new code will only be triggered if the media query (min-width: 480px) is TRUE.
Hope that helps.
Darren
Yariv Steinberg
1,788 PointsI've been doing the exact same code, and still got the same error.
Rich Donnellan
Treehouse Moderator 27,696 PointsYariv,
Can you post your code? Use the Markdown Cheatsheet (below) for formatting options.
Nurul Ahsan
2,039 Points@media screen and (min-width:480px){
#gallery li{
max-width: 28.3333%;
}
}
Rich Donnellan
Treehouse Moderator 27,696 PointsYou clearly didn't follow the Markdown formatting.
Adding the following two lines inside the media allowed me to pass:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
Make sure you're using width
, not max-width
; formatting might come into play as well.
Nurul Ahsan
2,039 PointsNurul Ahsan
2,039 Points@media screen and (min-width:480px){ #gallery li{
width: 28.3333%;
}
}
I think its right but Bummer! "Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."
Md.Nurul Ahsan Chowdhury(nurulahsan@gmail.com)