@media query src swap not working

Question

I've reviewed some questions and answers here and still cannot find my problem.

What I'm trying to do is: Toggle the display property of these three images on or off depending on the size of the screen. Only one image should display at a time.

I have not applied any css to .imagephone except what listed in the @media queries section.

.imgcontainer{
    background-color: red;
    width: 100%;
    overflow: hidden;
    max-width: 1500px;
    margin: auto;
}

.imagetablet{
    display: none;
}

.imagedesktop{
    display: none;
}

/**************@Media Tablets****************/
    
    @media screen and (max-width="800px"){
        .imagephone{display:none;}
        .imagetablet{display:block;}
        .imagedesktop{display:none;}
        }

/**************@Media Desktop*****************/
    
    @media screen and (max-width="1200px"){
        .imagephone{display:none;}
        .imagetablet{display:none;}
        .imagedesktop{display:block;}
        }

<div class="imgcontainer">
        <img class="imagephone" src="BannerPicSmall.png">
        <img class="imagetablet" src="BannerPicMedium.png">
        <img class="imagedesktop" src="BannerPicLarge.png">
    </div>

Please check this link:-http://stackoverflow.com/questions/27853884/media-queries-and-image-swapping — Razia sultana, Nov 05 '16 at 12:13
You have a typo, should be `max-width:1200px` with a colon ... and no quotes ... and swap the `@media` queries and put the `@Media tablets` last — Asons, Nov 05 '16 at 12:22

score 0 · Answer 1 · answered Nov 05 '16 at 13:37

  .imgcontainer{
    background-color: white;
    width: 100%;
    overflow: hidden;
    max-width: 1500px;
    margin: auto;
}

.imagetablet{
    display: none;
}

.imagedesktop{
    display: none;
}

/**************@Media Tablets****************/
    
    @media screen and (max-width:800px){
        .imagephone{display:none !important;}
        .imagetablet{display:block !important;}
        .imagedesktop{display:none !important;}
        }

/**************@Media Desktop*****************/
    
    @media screen and (max-width:1200px){
        .imagephone{display:none !important;}
        .imagetablet{display:none !important;}
        .imagedesktop{display:block !important;}
        }

<div class="imgcontainer">
        <img class="imagephone" src="http://www.claudelorrain.org/An-Artist-Studying-Nature.jpg">
        <img class="imagetablet" src="http://hdwallpaperia.com/wp-content/uploads/2015/01/Nature-Wallpaper-daydreaming-34811101-1024-7686-640x480.jpg">
        <img class="imagedesktop" src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Beautiful-Nature-Desktop-Wallpaper-640x360.jpg">
    </div>

Try this.

Hope it helps.

@media query src swap not working

1 Answers1