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 trial

HTML How to Make a Website Responsive Web Design and Testing Refactor the Layout

Posted by Sergio Barrerad
Sergio Barrerad
1,065 Points

inside the media query, select the list items iside the gallery and add a width of 28.3333%

Hello,

I do this:

@media screen and (min-width: 480px ){

gallery li {

width: 28.3333%; } }

but showme : Bummer! Did you add the width rule inside of the break point?

Thanks

css/main.css 
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;
  width: 28.3333%;
}

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%;
     }
}

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Sergio,

I copied and pasted the media query posted in your question into the challenge and it passed.

However, if I copy the entire code you posted, it doesn't.

Did you change or delete anything in the pre-loaded code? If you did that will cause a Bummer!.

Copy just the media query code into a 'fresh' challenge and it should pass.

Keep Coding! :)

Sergio Barrerad
Sergio Barrerad
1,065 Points

Hi Jason,

Yeah , now pass

Tnks!

am13
am13
2,455 Points
am13
am13
2,455 Points

Hi,

I've done everything that Sergio did and I still get a Bummer.

Please help. It's frustrating.

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Could you post your code? See here on how to do that.

But first, did you try what I suggested to Sergio? Copy the above media query only and paste just that at the end of a freshly loaded challenge.

:dizzy:

am13
am13
2,455 Points
am13
am13
2,455 Points

Hi Jason,

I've retyped, refreshed, changed browser from Chrome to FF and then vice versa and am still getting a Bummer msg. I can't move to the next video. Ugh!

Here's my code:

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
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
  width: 28.3333%;
}

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) {

}
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

It's because you put the width declaration in the wrong spot. It needs to go inside the media query at the bottom of the file, but you added it to the #gallery li higher in the CSS. So, you need to delete that line as you are not changing the width in normal view. The challenge wants you to use the media query to change the width to 28.3333% ONLY when the min-width is 480px.

So, you need to add the selector and the rule to inside the Media Query only.

@media screen and (min-width: 480px) {
   #gallery li {
   width: 28.3333%;
   }
}

As this will overwrite the original rule at the specified min-width.

I recommend going back and reviewing this video as Break-points (media queries) are going to play an important role in future lessons during this Track.

:dizzy: