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

Posted by Willem Folscher
Willem Folscher
933 Points

help with question

I'm struggling with this question , and cannot seem to get it 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) {

}

4 Answers

elk6
elk6
22,916 Points

In the second question you need to select every 4th li, so not just the first 4th item.

Put this in you rmedia query. That will select every 4th li inside the gallery. 

  #gallery li:nth-child(4n+4) {
    clear: left;
  }
elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

If it's the first question, you need to change the width of the gallery list items to 28.3333% inside the media query at the bottom of the style sheet. The one that targets screens with a minimal width of 480px.

Like this:

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

yes the second part is the issue

Willem Folscher
Willem Folscher
933 Points
Willem Folscher
Willem Folscher
933 Points

thank you so much!

elk6
elk6
22,916 Points

No problem!

Good luck with the course.