dan's @media query

by mrjordy

HTML

<div class="Small">this content will appear on a small screen only</div>
<div class="Big">this content will appear on a big screen only</div>

CSS

/*=============== media query ===============*/

/*this hides .Big for all screens ≤ 800 horizontal pixels*/
@media screen and (max-width: 800px) {
    .Big {
        display: none;
    }
}

/*this hides .Small for all screens ≥ 800 horizontal pixels*/
@media screen and (min-width: 801px) {
    .Small {
        display: none;
    }
}

/*----- note: the reason for 801px is because min and max media queries overlap at exactly 800. When using display:none toggles, neither will be displayed at exactly 800 pixels -----*/












/*========================= content that changes based on horizontal resolution ============================*/
 .Small {
    background-image: url("http://images.clipartpanda.com/phone-call-icon-04-512.png");
    background-color: #eef;
    height: 600px;
    width: 500px;
    background-position: -130px 40px;
    background-repeat: no-repeat;
}
.Big {
    background-image: url("http://images.clipartpanda.com/computer-screen-clipart-black-and-white-computer-monitor.svg");
    background-color: #eed;
    height: 600px;
    width: 500px;
    background-position: 0 20px;
    background-repeat: no-repeat;
}