Search code examples
cssmedia-queriesmargin

Media Query Margin Fail

So far all of my media queries are fine, except this one. I have an actual iPad and I am using a simulator as well as my client doesn't like his logo resting against the edge of the screen, so all I'm trying to do is either give it a bit of padding or a margin (padding didn't work either). I figure another pair of eyes wouldn't hurt - am I missing something here?? 

@media screen only and (min-width:768px) and (max-width: 1024px) {
    .site-header .home-link {
        margin: 0 20px!important;
    }
}
.site-header .home-link {
    background: url(http://client.savorweb.com/INWS/wp-content/uploads/2015/04/iwns-logo.png) left no-repeat;
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1024px;
    min-height: 150px;
    padding: 0px 5px 0px 10px;
    text-decoration: none;
    width: 100%;
}
Solution

  • Your media query is malformed. It should be:

    @media only screen and (min-width:768px) and (max-width: 1024px)

    With emphasis on only screen instead of screen only.