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 latasha downs
latasha downs
836 Points

what am i doing wrong with this code? im trying to add the width to 28.3333% inside this media query.

what am I missing?

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) {
  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
  width: 40%;
    float: right;
  }

}

#gallery li {
  width: 28.3333%;
}

3 Answers

Franciscus Agnew
Franciscus Agnew
23,912 Points
Franciscus Agnew
Franciscus Agnew
23,912 Points

Hello Latasha,

It appears you have placed the code in question outside of the actual media query declaration. Try this to see if it solves your problem.

@media screen and (min-width: 480px) {
  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
  width: 40%;
    float: right;
  }

 #gallery li {
   width: 28.3333%;
  }
/* 
    Notice the new position of the media 
    query's closing brace below?
*/
}
latasha downs
latasha downs
836 Points
latasha downs
latasha downs
836 Points

im still a little confused by your answer can you elaborate?

Franciscus Agnew
Franciscus Agnew
23,912 Points
Franciscus Agnew
Franciscus Agnew
23,912 Points

Hello Latesha,

In order to work with media queries one must understand the correct syntax to use. Every media query, like styling rules contain an opening -> { and closing bracket -> }.

Between the opening and closing brackets of the media query you place styling rules for the element(s) that you would like the media query to target or effectively change the way it displays your html document.

The styling rules that are placed outside of the media query's opening and closing brackets; like your #gallery li rule is in your CSS; will not be affected by the media query. My initial response simply placed your #gallery li rule inside your media query. Did it solve your problem?

For example,

/* Correct Syntax */
@media (max-width: 960px) {   /* Opening bracket */
    #gallery li {
        width: 29.3333%;
    }
} /* Closing bracket */

/* Incorrect Syntax */
    @media (max-width: 960px) {   /* Opening bracket */
        /* ----------------------------------------
              No styling rules have been 
             applied inside this media query 
         -------------------------------------------*/
    }   /* Opening bracket */

    /* The rule below will not be affected */
    #gallery li {
        width: 29.3333%;
    }

Media queries are an advanced topic within CSS... I would recommend that you research and practice using CSS more to increase your knowledge and understanding of it before tackling some of the more difficult aspects of CSS. I hope that helps!

Good Luck,

Franciscus

Glen Burnett
Glen Burnett
Courses Plus Student 27,349 Points

To elaborate on this........ look at it like this...

@media screen and (min-width: 480px) {
                           #primary {
                           width: 50%;
                           float: left;
                           }

                           #secondary {
                           width: 40%;
                           float: right;
                           }
}

#gallery li {
  width: 28.3333%;
}

The spacing to me looks a bit gross but the over exaggerated spacing hopefully illustrates the point a bit better. Everything INSIDE the @media screen code between { } will run if the screen a user is viewing your website on has a width of 480px or more

Because your gallery li code is OUTSIDE of the @media screen's opening and closing brackets like so { } it wont run when you reach a screen width of that size.