2

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%;
}

}
Vucko
  • 20,555
  • 10
  • 56
  • 107
user2900299
  • 57
  • 6
  • Check (among other things) if the condition "min-width:600px" is the opposite of "max-width:599px"... Perhaps the behaviour is not the expected "IF .. ELSE ..". – Peter Krauss Oct 20 '13 at 17:51

1 Answers1

5

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?

Community
  • 1
  • 1
im_benton
  • 2,541
  • 4
  • 21
  • 30
  • 1
    Wow. That worked. Thank you. Is there an explanation so that I can understand it? Or is this something basic I should just know and remember like p is paragraph? – user2900299 Oct 20 '13 at 17:01
  • Good to hear. Would you mind upvoting this answer and selecting the checkbox beneath the up/down vote if this was a sufficient solution? – im_benton Oct 20 '13 at 17:32
  • I tried, but apparently I haven't been on this site enough yet to up vote something. – user2900299 Oct 21 '13 at 09:43
  • `max-width` value is also important, in my case with 600px or 599px, it doesn't work, I should change to _1024px_ – bcag2 May 26 '23 at 07:17