Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 31, 2017 at 8:50 pm #832403
    Dwimmer

    Hi,
    I’m trying to show a different image or mobile and desktop. I Created a separate class for the two images (grid and box) and used this code from the support forum,

    @media only screen and (max-width: 768px) {
    .grid hide-in-mobile {
    display: none!important;
    }
    .box show-in-mobile {
    display: block!important;
    }
    }
    But it didn’t work. Do I have the code right?
    Thanks

    July 31, 2017 at 8:59 pm #832408
    Jordan Shannon

    Hey Dwimmer,

    Can you please provide a screenshot of the image you are needing to switch?

    Best regards,
    Jordan Shannon

    July 31, 2017 at 9:04 pm #832412
    Dwimmer

    Sure – actually if you look at the home page, the image on the top is the one for desktop, and the one below is for mobile – I just left both on the page so it would be easier for you to see.
    http://dev9.studio44webdesign.com/

    Thanks

    July 31, 2017 at 9:12 pm #832421
    Jordan Shannon

    Hi,

    Add the following to quick css:

    @media only screen and (max-width: 768px) {
.avia_textblock.grid {
display: none!important;
}
.avia_textblock.box {
display: block!important;
}
}


@media only screen and (min-width: 768px) {
.avia_textblock.grid {
display: block!important;
}
.avia_textblock.box {
display: none!important;
}
}

    Best regards,
    Jordan Shannon

    July 31, 2017 at 9:17 pm #832426
    Dwimmer

    Perfect! Thank you so much!

    July 31, 2017 at 9:20 pm #832428
    Jordan Shannon

    Hi,

    No problem at all. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘code for switching mobile and desktop images’ is closed to new replies.