Responsive CSS with display:none and media queries

Question

I'm sure this is quite a basic question, so apologies in advance as I am new to this.

I am working on a web app that is designed to be mobile first. As all my initial layouts are designed for small screens I have introduced a mobile phone jpg as an <img>. Then I have overlaid my canvas onto this using absolute positioning. This gives me a pseudo mobile screen I can use whilst experimenting with my design without having to constantly test with the handset.

The idea is to then use suitable media queries to which when encountering smaller screens use display:block to prevent the image being displayed.

For a short time I had it working, but now I've broken it (with no backup)) and can't see how! It works alright on the wider desktop screens. The image container is displayed and the backdrop canvas is correctly laid over the top. However the image container is also being displayed on mobile devices (and as there is no absolute position) my real layout is then displayed after the .

The HTML looks like this ...

<div id="container">
    <img src='phone.jpg' class="desktop-visible"/>
</div>

<div id="backdrop">
    Text
</div>

My CSS is currently this ...

// Set Defaults
.desktop-visible { display:none;}

// Desktop and landscape tablets
@media (min-width: 768px) {

.desktop-visible { display: block; margin: 0 auto; }

#container {
        position:relative;
        width: 538px;
        margin: 0 auto;
}

#container img {
        position:absolute;
        margin: 0 auto;
}

#backdrop {
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}

// Portrait tablets and landscape mobiles
@media (max-width: 767px) {

.desktop-visible { display: none; }

#container {
    position:relative;
    width: 538px;
    margin: 0 auto;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;  
}

}

// Portrait mobiles
@media (max-width: 480px) {

.desktop-visible { display: none; }

#container {
    display: none;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;
}

}

Answer 1

You're not closing the first media query. :-)

// Set Defaults
.desktop-visible { display:none;}

// Desktop and landscape tablets
@media (min-width: 768px) {

.desktop-visible { display: block; margin: 0 auto; }

#container {
        position:relative;
        width: 538px;
        margin: 0 auto;
}

#container img {
        position:absolute;
        margin: 0 auto;
}

#backdrop {
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}

} // you missed this one

// Portrait tablets and landscape mobiles
@media (max-width: 767px) {

.desktop-visible { display: none; }

#container {
    position:relative;
    width: 538px;
    margin: 0 auto;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;  
}

}

// Portrait mobiles
@media (max-width: 480px) {

.desktop-visible { display: none; }

#container {
    display: none;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;
}

}