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

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

Jana Beals
Jana Beals
3,647 Points
Posted by Jana Beals
Jana Beals
3,647 Points

Huh?

I thought I did this one right

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

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

2 Answers

Cesar Marroquin
Cesar Marroquin
10,520 Points
Cesar Marroquin
Cesar Marroquin
10,520 Points

your code should look like this

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

gallery li {

width: 28.3333%; } }

Cesar Marroquin
Cesar Marroquin
10,520 Points

glad to help:)

Cesar Marroquin
Cesar Marroquin
10,520 Points
Cesar Marroquin
Cesar Marroquin
10,520 Points

Your almost right, you selected the gallery list item correctly and set it to the proper width but you didnt put your code inside of the media query. Once you put it inside the media query, it will adapt to that size when it is at min-width 480px

Jana Beals
Jana Beals
3,647 Points
Jana Beals
Jana Beals
3,647 Points

But I don't see where a media query is.

Cesar Marroquin
Cesar Marroquin
10,520 Points

the media query in the code is the 

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

}

you should copy and paste the code that you wrote inside of their and it will work i just tried it

Jana Beals
Jana Beals
3,647 Points
Jana Beals
Jana Beals
3,647 Points

Got thru it, thank you for your help again!