Image on mobile vs. desktop

[thetm]

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

[BSSCommerce-HDL]

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

Step 2: Search file theme.liquid

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

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

Here is result: 

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 😍

[thetm]

Should I put the code here?

[BSSCommerce-HDL · 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 😍