Display different image before footer for mobile and desktop: Venture theme

Store Design
1

Hi,

I wanted to add an image before the footer of my page.

I added this code to display two different sizes of the same image and put it in the footer.liquid file:


    
![Footer_1_Final.jpg?v=1627396169|2880x760](upload://pONfX9CvyV6LDNCmu5f6HhHZSIt.jpeg)
 

	
![Footer_1_Final_mobile.jpg?v=1627733485|1599x755](upload://yXZ7LzKgqk0wd0YAXTHTXGDtIgI.jpeg)

Now that both images are added before footer, I want to display respective images for respective kind of device: phone or desktop.

I saw this code somewhere and pasted it in the bottom of theme.scss.liquid but there was no change in result:

@media all and (min-width: 480px) {
    .deskContainer {display:block;}
    .phoneContainer {display:none;}
}

@media all and (max-width: 479px) {
    .deskContainer {display:none;}
    .phoneContainer {display:block;}
}

Despite adding the above code, both the images are being displayed in both kinds of devices. Can someone please help me as to how can I display the respective images for different displays, i.e., phone and desktop

Any help is highly appreciated.

Store- sohumretail.myshopify.com

Pass- Chaman@10

Thanks!

2

Hi,

CSS is general case-insensitive but HTML selectors for classes and IDs are case-sensitive.

Change your CSS code like this

@media all and (min-width: 480px) {
    .deskcontainer {display:block;}
    .phonecontainer {display:none;}
}

@media all and (max-width: 479px) {
    .deskcontainer {display:none;}
    .phonecontainer {display:block;}
}

Also you follow the first-mobile approach you can optimize the code as this.

.deskcontainer {
    display: none;
}

@media all and (min-width: 480px) {
    .deskcontainer {
        display: block;
    }
    .phonecontainer {
        display: none;
    }
}
1 Like
3

Thanks for the help! It worked perfectly