CODEWITHSUNDEEP
css
user2900299
user2900299

Reputation: 57

css @media screen does not work fully

I added an @media screen to my CSS document. I thought that I would directly copy paste the CSS for the first screen size and adjust the elements for how I wanted them to adjust on a smaller screen. I did that and changed one element, h1. When I went to check my site, h1 is the only item of the style sheet that shows up at all. None of the other items I copied work on the small size screen. Why? If none of the items worked, I'd think that the @media screen and (max-width:599px) line of code was wrong, but it works a quarter of the time, so I am really at a loss here. Why is the rest of the CSS not working? Thank you.

@media screen and (min-width:600px){
    body{
        background-image: url('leavesBackground.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: bottom;
        position:relative;
        margin-left: 0px;
    }

    h1{
        text-align:left;
        font-family:Georgia,"Times New Roman", Serif;
        font-size:3em;
        margin-left: 0px;
    }

    h2{
        margin-left: 0px;
        width:40%;
        height:250px;
        overflow-x:scroll; 
        overflow-y:hidden;
        border-style:solid;
        border-width:1px;
    }

    p{
        text-align:left;
        font-family:Arial,Helvetica, Sans-Serif;
        font-size:.9em;
        margin-left: 10px;
        width:60%;
    }
}






@media screen and (max-width:599px) {
body    {position:relative;
margin-left: 0px;
}

h1  {text-align:left;
font-family:Georgia,"Times New Roman", Serif;
font-size:2em;
margin-left: 0px;
}

h2  {margin-left: 0px;
width:40%;
height:250px;
overflow-x:scroll; 
overflow-y:hidden;
border-style:solid;
border-width:1px;
}

p   {text-align:left;
font-family:Arial,Helvetica, Sans-Serif;
font-size:.9em;
margin-left: 10px;
width:60%;
}

}

Upvotes: 2

Views: 1827

Answers (1)

im_benton
im_benton

Reputation: 2621

Try using the qualifier "only" 

@media only screen and (min-width:600px) {}

@media only screen and (max-width:599px) {}

Here is a quote straight from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. 
User agents must process media queries starting with ‘only’ as if the ‘only’ 
keyword was not present.

Reference this post: What is the difference between "screen" and "only screen" in media queries?

Upvotes: 5

Related Questions