Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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;
}
}
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;
}
}
Thanks for the help! It worked perfectly
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024