Separate mobile and desktop image

Tourist
14 0 0

Hi, I am trying to put 1 image on mobile and hide it on desktop and put a different image on desktop and hide it on mobile. The code below shows 1 picture on desktop but shows both images on mobile? Anyone know whats wrong with the coding? Thanks!

 

.<style>
.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="Image1.jpg">
</div>
<div class="desktop-image">
<img src="Image2.jpg">
</div>
</div>

0 Likes
Shopify Partner
84 16 20

Hello @Portafit 

 

Please replace your code with below code and it will fix your issue :)

 

<style>
@media (max-width: 991px){
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="Image1.jpg">
</div>
<div class="desktop-image">
<img src="Image2.jpg">
</div>
</div>

Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com [This is my PAYPAL too:) ]
Skype: parthbhut7

0 Likes
Highlighted
Tourist
14 0 0

Hi @ParthBhut 

 

Thanks for the reply, I replaced the code with the code you provided below and now its shows both images on desktop and only 1 on mobile. Any idea why?

 

Untitled.png

 

0 Likes
Shopify Partner
84 16 20

Hello @Portafit 

 

Can you please share store link so i can check and help you :)

 

Best Regards

Parth Bhut

0 Likes