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

Solved

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

ChamanGarg
Pathfinder
94 0 25

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:

 

<div class="deskcontainer">
    <img id="image" src="https://cdn.shopify.com/s/files/1/0585/8990/5071/files/Footer_1_Final.jpg?v=1627396169"> 
</div>
<div class="phonecontainer">
	<img id="image" src="https://cdn.shopify.com/s/files/1/0585/8990/5071/files/Footer_1_Final_mobile.jpg?v=1627733485">
</div>

 

 

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!

Accepted Solution (1)

drakedev
Shopify Partner
696 150 240

This is an accepted solution.

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;
    }
}

 

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

Replies 2 (2)

drakedev
Shopify Partner
696 150 240

This is an accepted solution.

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;
    }
}

 

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
ChamanGarg
Pathfinder
94 0 25

Thanks for the help! It worked perfectly