"Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em"

Question

Not sure what I'm doing incorrectly:

@media screen and (min-width: 480px) { h1{ font-size: 2.5em; } }

Answer 1 · 2015-12-16T22:45:36Z

December 16, 2015 10:45pm

Hey there Matthew, hopefully my explanation here will help clarify your misunderstanding.

The @media screen is creating the HTML page to become responsive as a result of the pixel size it is being displayed on, which in this case is 480 pixels (a typical size for mobile devices) or larger. So the 480 pixel break point is for when a device's resolution spans out as far as 480 pixels or more, it will display h1 (which should be your name if you have left it the same as the tutorial) as the font-size of 2.5em, or 40 pixels (unless specified differently from the parent element).

Your code should look like the following..

@media screen and (min-width): 480px)
  {
    h1
      {
        font-size: 2.5em;
      }
  }

Here's an edit to my answer.. I went and redid this challenge. This is what I got for my final code. You needed to add the responsive @media code line at the first line and include / indent all of the coding you wanted to be changed to responsive inside of the brackets. I went ahead and included all of the code that was given in the challenge. My code looked like this after part 1 and 2 (i've added comments to help :)).

@media screen and (min-width: 480px)
{ /* opening bracket for @media */
  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: 2.5em;
    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;
  }
} /* this is the closing bracket. everything inside will be affected once the screen pixels reach 480px and larger */

@media screen and (min-width: 660px)
{ /* the following code will be affected once the screen resolution reaches 660 pixels or larger */
  h2
  {
    font-size: 1.75em  
  }
} /* only the code above is being affected once the screen resolution reaches 660 pixels or larger */

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Ashman

Matthew Ashman

"Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em"

1 Answer

Hunter G

Hunter G