Image on mobile vs. desktop

Solved

Image on mobile vs. desktop

thetm
Excursionist
16 0 4

Hello, I need help with a custom code. On the desktop, this section has three photos in a row. On the mobile, it has two photos then the third photo on a second row.  I would like a code that hides the third picture from the mobile view. (Also, any advice on why the gallery section is so large on the desktop view??) Thanks in advance.

https://sakidiamonds.com/pages/custom-jewelry-inquiry

 

Screenshot 2024-06-25 at 9.11.32 PM.pngScreenshot 2024-06-25 at 9.12.42 PM.png

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
1085 372 444

This is an accepted solution.

Hi @thetm

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

 

<style>
@media only screen and (max-width: 767px) {
   .container .image_hover:nth-last-child(1):nth-child(odd) {
      display: none;
   }
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

BSSCommerce-HDL
Shopify Partner
1085 372 444

Hi @thetm
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1719365281071.png

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_1-1719365307708.png

 

@media only screen and (max-width: 767px) {
   .container .image_hover:nth-last-child(1):nth-child(odd) {
      display: none;
   }
}

 

Here is result: 

BSSCommerceHDL_2-1719365383511.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
thetm
Excursionist
16 0 4

Should I put the code here?

Screenshot 2024-07-01 at 7.23.28 PM.png

BSSCommerce-HDL
Shopify Partner
1085 372 444

This is an accepted solution.

Hi @thetm

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

 

<style>
@media only screen and (max-width: 767px) {
   .container .image_hover:nth-last-child(1):nth-child(odd) {
      display: none;
   }
}
</style>

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency