In my product description, can I display only certain images on desktop and others on mobile?

codenoob
New Member
5 0 0

For either the Debut or Debutify theme,

is there any code I can add so my shop only displays certain landscape images on desktop

and only displays certain square and vertical images on mobile?

I saw that there is code on the Shopify community to do this for the home page,

but I was wondering if there's any code I could use for the product description as well?

 

Thanks!

0 Likes
dmwwebartisan
Shopify Partner
9208 2134 2905

@codenoob 

Please share store URL & screenshot what do you want

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
codenoob
New Member
5 0 0

Thanks for the response!

This is the product page link:

https://sanitationcity.co/products/sanitation-city%E2%84%A2-ear-pick-otoscope

Screen Shot 2021-09-23 at 12.29.50 PM.png

I want to display the first 5 landscape pictures on the desktop and hide the pictures below it for desktop,

and then I would like to display the 6-13th vertical pictures for mobile and hide the first 5 landscape images for mobile.

 

I've tried to paste code like this in product-template.liquid, but it didn't work:

<style>
@media only screen and (min-width: 750px){
#https://cdn.shopify.com/s/files/1/0534/4772/1123/files/3_Product_Introduction_2.jpg? {
display: none;
}
}

</style>

0 Likes