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

Posted by Angelina Bethoney
Angelina Bethoney
117 Points

@media query not working correctly

Hi! I'm trying to make this site responsive without using a framework. For the most part, it's working, except for the smallest query (720 pixels and less) the footer will NOT budge. I just want it to be lower down on the page so it doesn't run into my other divs.

The code is:

footer { margin-top: 3%; }

@media (min-width: 720px) { footer{ padding-bottom:25px!important; }

}

(I know !important isn't the best usage, but I figured it was worth a try). I'm trying to target the footer and the <ul>'s inside of the footer... neither is working. help!

1 Answer

Vishal Arora
Vishal Arora
2,602 Points
Vishal Arora
Vishal Arora
2,602 Points

Angelina,

It's hard to answer this without seeing the rest of your markup/styles. Have you done a sanity check to make sure that the media query is working in the first place? Something like:

@media screen and (min-width: 720px) {
  body {
    background: red;
  }
}

If the background turns red, you'll know that the issue is with the footer styling and not the media query.

The other potential issue is with the media query itself. You mention that you're trying to target 720px and less but a media query testing for "min-width: 720px" does the opposite. That would only fire if the width were more than 720px (i.e. if the minimum was 720px).