Different banner images to different devices

[Wanigajameson]

Hey everyone,

One last question for today: I have two images, and I want to display them based on the device being used. For example, I want image 1 to be shown on a desktop PC and image 2 on a mobile device. How can I achieve this?

Thanks!

[prakashVt · Accepted solution]

So there are many ways to do it but the simple way only using the css is below: 

First create another image tag just below the current image and give it the mobile version url 

 <img src="{{'desktop-image.jpg' | assets_url}}" alt="Desktop Image" class="responsive-image desktop-image">

    <!-- Mobile Image -->
    <img src="{{'mobile-image.jpg' | assets_url}}" alt="Mobile Image" class="responsive-image mobile-image">

Then add css as below 

 /* Image for mobile devices */
        @media only screen and (max-width: 768px) {
            .desktop-image {
                display: none;
            }
            .mobile-image {
                display: block;
            }
        }

        /* Hide mobile image on desktop */
        @media only screen and (min-width: 769px) {
            .mobile-image {
                display: none;
            }
        }

Please adjust the code and class name based on your need. 

Let me know if you need any further help. 

[Made4uo-Ribe · Accepted solution]

Hi @Wanigajameson 

This design requires a developer, or if you're comfortable with code, you can check this out.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[prakashVt · Accepted solution]

So there are many ways to do it but the simple way only using the css is below: 

First create another image tag just below the current image and give it the mobile version url 

 <img src="{{'desktop-image.jpg' | assets_url}}" alt="Desktop Image" class="responsive-image desktop-image">

    <!-- Mobile Image -->
    <img src="{{'mobile-image.jpg' | assets_url}}" alt="Mobile Image" class="responsive-image mobile-image">

Then add css as below 

 /* Image for mobile devices */
        @media only screen and (max-width: 768px) {
            .desktop-image {
                display: none;
            }
            .mobile-image {
                display: block;
            }
        }

        /* Hide mobile image on desktop */
        @media only screen and (min-width: 769px) {
            .mobile-image {
                display: none;
            }
        }

Please adjust the code and class name based on your need. 

Let me know if you need any further help. 

[gr_trading]

Hi @Wanigajameson ,

You have to modify the section to provide option to upload two images and media query to show appropriate image.

Request you to refer the below video how you can add these settings for section.

Hope this will help..., don't forget to like and mark as solution.

[Made4uo-Ribe · Accepted solution]

Hi @Wanigajameson 

This design requires a developer, or if you're comfortable with code, you can check this out.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[topnewyork · Accepted solution]

Hi @Wanigajameson , kindly checkout the below videos

And

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!