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

Hayden Bradfield
Hayden Bradfield
1,797 Points
Posted by Hayden Bradfield
Hayden Bradfield
1,797 Points

Why aren't my media queries working?

I can't get my media queries to work. Not only that, now I am unable to shrink the page any further than I was able to before.

Before, the header title broke into two lines when I shrunk the page to it's minimum size. Now, it won't break into two lines.

I wanted the padding for my contents within the section to be smaller than the padding on a wider page. But I can't get that to work when I added in the media queries.

Here is my code:

body { background-color:white; margin: 0% 0% }

section { background-color:white; margin-top:0% 0%; padding-right:15px; height:100%; } header { background-color:#465E84; }

header h1 { margin: 0% 0%; text-align:center; padding-top:4px; padding-bottom:3px; font-family: 'Bungee Inline', cursive; }

header h1 small { font-family: 'Gloria Hallelujah', cursive; }

header a { text-decoration:none; color:white; }

h2 { margin: 0% 0%; padding-top:0.5em; }

p { word-wrap:break-word; padding-bottom:0.5em; display:block; }

nav { background-color:#89cff0; margin: 0% 0%; text-align:center; }

nav ul { margin: 0% 0%; padding-top:0.5em; padding-bottom:0.5em; list-style:none; padding-left:0px; }

nav ul li { display:inline; text-align:center; margin: 0% 0%; padding-left:4px; padding-right:4px; }

nav ul li a { text-align:center; margin: 0% 0%; text-decoration:none; color:#465E84; font-family: 'Fjalla One', sans-serif; }

nav ul li a:hover { color:white; }

p { margin: 0% 0%; }

foot {

margin: 0% 0%;
background-color:#465E84;
height:100%;
bottom:0;
position:relative;
text-align:center;
color:#89cff0;

}

wrapper {

min-height: calc(100vh - 18px);

}

/* ======= Media Query ========== */

@media (min-width:400px) { h1 { font-size:26px; }

h1 small {
    font-size:20px;
}

h2 {
    padding-left:5px;
    padding-right:5px;
}

p {
    padding-left:2px;
    padding-right:2px;

}

}

@media (min-width:780px) {

h1 {
    font-size:36px;
}

h1 small {
    font-size:24px;
}

h2 {
    padding-left:15px;
    padding-right:15px;
}

p {
    padding-left:15px;
    padding-right:15px;
}

}

Here is the html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Home</title> <link rel="stylesheet" href="normalize.css" media="screen"> <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="main.css" media="screen"> </head> <body> <div id="wrapper"> <header> <a href="index.html"> <h1>Hayden Bradfield</h1> <h1><small>Web Designer Student</small></h1> </a> <nav id="nav"> <ul id="mainmenu"> <li><a href="index.html">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </nav> </header> <section> </ul> <h2>Intro</h2> <p>This is a test page.</p> <h2>More Info</h2> <p>Helllllllllllllllllllllllllllllllllllllllllllllooooooooooooooooooooooooooooo!</p> </section> </div> <div id="foot"> <small>&copy Hayden Bradfield</small>

            </div>

</body>

</html>

3 Answers

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

This is your media query:

@media (min-width:400px) {
    h1 {
        font-size:26px; 
    }

You forgot to put another closing curly brace at the end. Change that to:

@media (min-width:400px) {
    h1 {
        font-size:26px;
    }
}

Also, put the media querie(s) at the end of the file.

I hope this helps! ~Alex

Mark Trevathan
Mark Trevathan
8,153 Points
Mark Trevathan
Mark Trevathan
8,153 Points

He has his closing braces, the media queries are working just fine. But it's your technique that isn't working. If you are unsure if your media query is working, change the background color at each of your break points to make it easier to tell. What is it exactly that you are trying to do with the header?

PS- It is general practice to only use one h1 per web page!

Mark Trevathan
Mark Trevathan
8,153 Points
Mark Trevathan
Mark Trevathan
8,153 Points

So you would want: 

@media (min-width: 480px) {
  section h2,
  section p {
    padding: 5px;
  }
}

@media (min-width: 780px) {
  section h2,
  section p {
    padding: 15px;
  }
}
Hayden Bradfield
Hayden Bradfield
1,797 Points
Hayden Bradfield
Hayden Bradfield
1,797 Points

I am trying to add a padding of 5px on the h2 and p's on the section area when the screen is a minimum of 480px. When the screen is at least 780px, I want the padding to be 15px.