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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024