Can't properly use @media only screen command

[jools]

Hello all,

 

I'm trying to create a site in CSS which uses the @media only screen command to display an output depending on the size of the screen which the site is being viewed from - i.e dynamic response.

 

I am altering a tutorial to suit my needs and in the initial tutorial there are three size specifications which were set up:

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

I wanted to add to this and create a fourth rule for screen sizes between 800 and 1024 and so added the following command and set up CSS rules under it:

@media only screen and (min-width : 800px)

To see that this was 'working' under the CSS rules for the command I set it up so one image wouldn't display under these settings:

#slideshow {                display: none;                }

This appeared to work with the image disappearing at what I guessed was about 800px (I am testing be just resizing my browser). However, the problem is that it doesn't come back when the browser size is then extended above 1024px. It seems like the rule applied for @media only screen and (min-width : 800px) is affecting the preceding @media only screen and (min-width : 1024px) CSS styles.

 

I appear to have noticed something similar when I was sizing images for certain @media commands, but that's perhaps another post for another day (although hopefully related).

 

Any advice or suggestions would be much appreciated.

 

 

Many thanks for reading.

 

I will post all the CSS for that I've put under the @media commands below in case there's something in there causing a prob:

nav ul { padding: 0px; }/* low resolution 480 px and below for smart phones*/@media only screen and (max-width : 480px) {         p {color: rgb(0,0,0);}         body {background: rgb(244,244,244);}         #master {                width: 100%;        margin: 0 auto;        background: rgb(255, 255, 255);        border: 0;        overflow: hidden;    /* add to the parent element, to crop out anything that would otherwise exceed its size.*/        }         header {    height: 70px;    padding-left: 10px;    padding-top: 10px;    background-color: #F60;                 }                 header img{         height: 100%;         width:auto;                 }         nav {         text-align: center;                 padding: 10px 5px ;         border: thin solid #F60;         font-family: Meiryo;         background-color: #F96;         }                 nav * {font-size:12;} /*remove spacing produced by display: inline-block; between li */             nav li {            display: inline;            margin-left: 10px;            font-size: 100%;            line-height:160%;            font-family: Meiryo;            }                  nav li a {             color: #000;             text-decoration: none;             line-height: 10px; /* matches height of nav*/             }                 #slideshow {                width: 100%;                  margin: 0px auto;                border: none;                padding-top: 0px;                padding-right: 0px;                padding-bottom: 10px;                padding-left: 0px;                }            #slideshow img {                width: 100%;                border: none;                }                    /* #slideshow {display: none;}  this is basically saying don't display the slideshow div for the low resolution screen*/         #contentbox_left {/*three content boxes*/    width: 100%;    margin: 0px auto;    border: none;    padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    text-align: center;    }            #contentbox_left p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        margin-top: 0px;        margin-left: 0px;        padding-top: 0px;        padding-left: 0px;        }                #contentbox_left img {    max-width: 100%;        height: auto        border: none;    margin-top: 0px;    margin-left: 0px;    padding-top: 0px;    padding-left: 0px;    text-align: center;        }                #contentbox_left h2        {        font-family: Arial, Helvetica, sans-serif;        color: #F30;        font-size: 110%;        }                                    #contentbox_middle {    width: 100%;    margin: 0px auto;    border: none;    padding-top: 10px;    padding-left: 0;    padding-right: 0;    padding-bottom: 10px;    border: 0;    text-align: center;        }            #contentbox_middle p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_middle img {        max-width: 100%;        height: auto        border: none;        }                #contentbox_middle h2        {        font-family: Arial, Helvetica, sans-serif;        color: #F30;        font-size: 110%;        }        #contentbox_right {    width: 100%;    margin: 0px auto;    border: none;    padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    text-align: center;        }            #contentbox_right p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_right img {        max-width: 100%;        height: auto        border: none;        }                #contentbox_right h2                {        font-family: Arial, Helvetica, sans-serif;        color: #F30;        font-size: 110%;        }         .widebox{/*put in a slider or other image here in here*/    width: 100%;    margin: 0px auto;    border: none;    padding-top: 0px;    padding-right: 0px;    padding-bottom: 10px;    padding-left: 0px;;        }                .widebox img{        width: 100%;        border: none;        }         article{width: 95%; margin-left: 10px; margin-bottom: 60px; }         .news{margin-bottom: 20px;}     .news h2 {font-size: 120%; margin-bottom: 5px;}     .news h2 a {text-decoration: none; color: rgb(189,30,44); }     .news p {line-height: 160%;}     .newsmeta {font-size:70%; margin-top: 10px; float:right; font-family: verdana;}     .newsmeta a {color: rgb(189,30,44);}         footer {    height: 50px;    margin-bottom: 0px;    margin-top:0px;    padding-bottom: 0px;    padding-top:0px;    background-image: url(footer_background.jpg);    margin-top:0px;    background-repeat: repeat-x;    color: #FFF;    }                 #lowerfooter    {    height: auto;    padding-top: 0;    margin-top: 0;    background-color: #F60;    padding-left: 20px;    font-family: Meiryo;    font-size:80%;    overflow: hidden;    padding-bottom: 100px;    }            .lowerfooter_innerbox        {    float: left;    margin-top: 0px;    padding-right: 12px;    font-size: 90%;    color: #FFF;    margin-right: 12px;        }                .lowerfooter_innerboxright {    float: left;    margin-top: 0px;    font-size: 9px;    color: #FFF;    font-size: 90%;        }      }/* medium resolution 481 px and above until 800px*/@media only screen and (min-width : 481px) {*{/* for better control over the defaults and ensuring there are no spaces.*/    margin:0;    padding:0;    }    p {color: rgb(0,0,0);}    body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/    header {        height: 80px;        background-image: url(2_HeaderBG.jpg);        padding-left: 10px;        padding-top: 10px     }        nav ul, nav li {margin: 0; padding:  0; text-indent:0; list-style-type:  none;}        nav {    height:30px;    font-family: Meiryo;    background-color: #F96;    border: thin solid #F60;    vertical-align: middle;    text-align: center;    margin-top: 0px;    margin-bottom: 0px;    padding-top: 0px;    padding-bottom: 0px;        }                    nav ul, nav li {margin: 0; padding:  0; text-indent:0; list-style-type:  none;}                nav li {                    display: inline-block;                margin-left: 10px;                font-size: 110%;                line-height: 160%;                }                nav li a {            display: inline-block;            color: #000;            font-size: small;             text-decoration: none;            line-height: 10px; /* matches height of nav*/                        }                        #master {            border: none;            width: 100%;            height:auto;            margin-top: 0;            margin-right: auto;            margin-bottom: 0;            margin-left: auto;            background-color: rgb(255,255,255);            overflow: hidden;    /* add to the parent element, to crop out anything that would otherwise exceed its size.*/            }                #slideshow {                width: 100%;                  margin: 0px;                border: none;                padding-top: 0px;                padding-right: 0px;                padding-bottom: 10px;                padding-left: 0px;                }            #slideshow img {                width: 100%;    background-color: none;    border: none;                }        #contentbox_left {/*three content boxes*/    padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    float: left;        }            #contentbox_left p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_left img {        max-width: 100%;        height: auto        border: none;            }                #contentbox_left h2{font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }                                    #contentbox_middle {        padding-top: 10px;    padding-left: 0;    padding-right: 0;    padding-bottom: 10px;    border: 0;    float: left;    }            #contentbox_middle p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_middle img {        max-width: 100%;        height: auto        border: none;        }                #contentbox_middle h2{font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }        #contentbox_right {        padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    float: left;    }            #contentbox_right p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_right img {        max-width: 100%;        height: auto        border: none;        }                #contentbox_right h2{        font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }        #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many             per row and also allow them to be able to be shrunk to fit*/    width: auto;    height:auto;    border: none;    padding-bottom: 10px;    padding-top: 10px;    float: left;    }    .widebox{/*put in a slider or other image here in here*/    width: 100%;    margin: 0px auto;    border: none;    padding-top: 0px;    padding-right: 0px;    padding-bottom: 10px;    padding-left: 0px;;        }                .widebox img{        width: 100%;        border: none;        }    article{    width: 95%;    margin-left: 10px;    float: left;    }    .news{ margin-bottom: 20px;}        .news h2{font-size: 120%; margin-bottom: 5px;}        .news h2 a {text-decoration:none; color: rgb(189,30,44);}        .newsmeta {font-size: 70%; margin-top:5px; float: right; font-family: verdana;}        .newsmeta a {color: rgb(189,0,44);} footer {    height: 50px;    margin-bottom: 0px;    margin-top:0px;    padding-bottom: 0px;    padding-top:0px;    background-image: url(footer_background.jpg);    margin-top:0px;    background-repeat: repeat-x;    color: #FFF;            }                 #lowerfooter    {    height: auto;    padding-top: 0;    margin-top: 0;    background-color: #F60;    padding-left: 20px;    font-family: Meiryo;    font-size:80%;    overflow: hidden;    padding-bottom: 100px;    }            .lowerfooter_innerbox        {        float: left;        margin-top: 0px;        padding-right: 12px;        font-size: 100%;        color: #FFF;        margin-right: 12px;        text-align: left;        }        .lowerfooter_innerboxright {        float: left;        margin-top: 0px;        font-size: 9px;        color: #FFF;        text-align: right;        }        }/* larger medium resolution 800 px and above until 1023px*/@media only screen and (min-width : 800px) {*{/* for better control over the defaults and ensuring there are no spaces.*/    margin:0;    padding:0;    }    p {color: rgb(0,0,0);}    body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/    header {        height: 80px;        background-image: url(2_HeaderBG.jpg);        padding-left: 10px;        padding-top: 10px     }        nav ul, nav li {margin: 0; padding:  0; text-indent:0; list-style-type:  none;}        nav {    height:30px;    font-family: Meiryo;    background-color: #F96;    border: thin solid #F60;    vertical-align: middle;    text-align: center;    margin-top: 0px;    margin-bottom: 0px;    padding-top: 0px;    padding-bottom: 0px;        }                    nav ul, nav li {margin: 0; padding:  0; text-indent:0; list-style-type:  none;}                nav li {                    display: inline-block;                margin-left: 10px;                font-size: 110%;                line-height: 160%;                }                nav li a {            display: inline-block;            color: #000;            font-size: small;             text-decoration: none;            line-height: 10px; /* matches height of nav*/                        }                        #master {            border: none;            width: 100%;            height:auto;            margin-top: 0;            margin-right: auto;            margin-bottom: 0;            margin-left: auto;            background-color: rgb(255,255,255);            overflow: hidden;    /* add to the parent element, to crop out anything that would otherwise exceed its size.*/            }                #slideshow {                display: none;                }                            #slideshow img {                width: 100%;    background-color: none;    border: none;                }        #contentbox_left {/*three content boxes*/    padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    float: left;        }            #contentbox_left p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_left img {        max-width: 100%;        height: auto        border: none;            }                #contentbox_left h2{font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }                                    #contentbox_middle {        padding-top: 10px;    padding-left: 0;    padding-right: 0;    padding-bottom: 10px;    border: 0;    float: left;    }            #contentbox_middle p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_middle img {        max-width: 100%;        height: auto        border: none;        }                #contentbox_middle h2{font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }        #contentbox_right {        padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    float: left;    }            #contentbox_right p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_right img {        max-width: 100%;        height: auto        border: none;        }                #contentbox_right h2{        font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }        #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many             per row and also allow them to be able to be shrunk to fit*/    width: auto;    height:auto;    border: none;    padding-bottom: 10px;    padding-top: 10px;    float: left;    }    .widebox{/*put in a slider or other image here in here*/    width: 100%;    margin: 0px auto;    border: none;    padding-top: 0px;    padding-right: 0px;    padding-bottom: 10px;    padding-left: 0px;;        }                .widebox img{        width: 100%;        border: none;        }    article{    width: 95%;    margin-left: 10px;    float: left;    }    .news{ margin-bottom: 20px;}        .news h2{font-size: 120%; margin-bottom: 5px;}        .news h2 a {text-decoration:none; color: rgb(189,30,44);}        .newsmeta {font-size: 70%; margin-top:5px; float: right; font-family: verdana;}        .newsmeta a {color: rgb(189,0,44);} footer {    height: 50px;    margin-bottom: 0px;    margin-top:0px;    padding-bottom: 0px;    padding-top:0px;    background-image: url(footer_background.jpg);    margin-top:0px;    background-repeat: repeat-x;    color: #FFF;            }                 #lowerfooter    {    height: auto;    padding-top: 0;    margin-top: 0;    background-color: #F60;    padding-left: 20px;    font-family: Meiryo;    font-size:80%;    overflow: hidden;    padding-bottom: 100px;    }            .lowerfooter_innerbox        {        float: left;        margin-top: 0px;        padding-right: 12px;        font-size: 100%;        color: #FFF;        margin-right: 12px;        text-align: left;        }        .lowerfooter_innerboxright {        float: left;        margin-top: 0px;        font-size: 9px;        color: #FFF;        text-align: right;        }        }/* high resolution 1024 px and above*/@media only screen and (min-width : 1024px) {        *{/* for better control over the defaults and ensuring there are no spaces.*/    margin:0;    padding:0;    }          p {color: rgb(0,0,0);}          body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/        header {    height: 80px;    padding-top: 10px;    padding-left: 160px;    background-image: url(2_HeaderBG.jpg);    background-repeat: repeat-x;    }        nav ul, nav li {margin: 0; padding:  0; text-indent:0; list-style-type:  none;}        nav {    height:30px;    font-family: Meiryo;    background-color: #F96;    color: #000;    border: thin solid #F60;    vertical-align: middle;    text-align: center;    margin-top: 0px;    margin-bottom: 0px;    padding-top: 0px;    padding-bottom: 0px;        }         nav * {font-size:0;} /*remove spacing produced by display: inline-block; between li */            nav li {        display: inline-block;        padding-top: 10px;        }                nav li a {        display: inline-block;        color: #000;        font-size: small;        text-decoration: none;        line-height: 10px; /* matches height of nav*/        padding: 0 15px;        /*text-decoration: none;*/          }            #master  /*the box we work in*/    {    border: none;    width: 1024px;    height:auto;    background-color: rgb(255,255,255);    margin-top: 0;    margin-right: auto;    margin-bottom: 0;    margin-left: auto;    }                         #slideshow{    width: 100%;    margin:  0px;    border: none;    padding-top: 0px;    padding-right: 0px;    padding-bottom: 10px;    padding-left: 0px;    }        #slideshow img {/*image goes in here - this is the main image at the top*/    width: 100%;    background-color: none;    border: none;    }        #contentbox_left {/*three content boxes*/    width: 328px;    padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right: 0;    border: 0;    float: left;    }            #contentbox_left p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_left img {        margin-bottom: 10px;        border: none;        }                #contentbox_left h2{font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }                                    #contentbox_middle {    width: 328px;    padding-top: 10px;    padding-right: 20px;    padding-left: 20px;    padding-bottom: 10px;    border: 0;    float: left;    }            #contentbox_middle p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_middle img {        margin-bottom: 10px;        border: none;        }                #contentbox_middle h2{        font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }        #contentbox_right {    width: 328px;    padding-top: 10px;    padding-bottom: 10px;    padding-left: 0;    padding-right:0;    border: 0;    float: left;    }            #contentbox_right p {        font-family:verdana;        font-size:80%;        line-height:140%;        text-align: justify;        }                #contentbox_right img {        margin-bottom: 10px;        border: none;        }                #contentbox_right h2{font size: 70%;        font-family: Arial, Helvetica, sans-serif;        color: #F30;        }                        #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many             per row and also allow them to be able to be shrunk to fit*/    width: auto;    height:auto;    border: none;    padding-bottom: 10px;    padding-top: 10px;    float: left;            }        .widebox{/*put in a slider or other image here in here*/    width: 100%;    margin:  auto;    border: none;    padding-bottom: 10px;        }                       article {    width: 940px;    margin-left: 10px;    margin-bottom: 50px;    }                     .news {margin-bottom: 20px;}          .news h2 {font-size:120%; margin-bottom: 5px;}         .news h2 a {text-decoration:none; color: rgb(189,30,44);}         .newsmeta {font-size:70%; margin-top: 5px; float: right; font-family:verdana; }         .newsmeta a {color: rgb(189,0,44);}              footer {    height: 50px;    margin-bottom: 0px;    margin-top:0px;    padding-bottom: 0px;    padding-top:0px;    background-image: url(footer_background.jpg);    margin-top:0px;    background-repeat: repeat-x;    color: #FFF;            }                         #lowerfooter    {    height: 200px;    padding-top: 0;    margin-top: 0;    background-color: #F60;    padding-left: 160px;    font-family: Meiryo;    font-size:80%;    overflow: hidden;    padding-bottom: 100px;    }            .lowerfooter_innerbox        {        float: left;        height: 300px;        width: 300px;        margin-top: 20px;        padding-right: 12px;        font-size: 100%;        color: #FFF;        margin-right: 12px;        text-align: left;        }        .lowerfooter_innerboxright {        float: left;        height: 300px;        width: 380px;        margin-top: 20px;        font-size: 9px;        color: #FFF;        text-align: right;        }        }    

 

 

 

 

 

 

 

 

 

[dsonesuk]

ugh i cant look through all that, it depends on the order you have used, and you could use

 

@media only screen and (min-width : 800px) and (max-width : 1024px){ #slideshow { display: none; } }

[jools]

Yes, sorry about that. Noted: no such long code posts in future.

 

dsonesuk, your suggestion worked perfectly. Many thanks.