Remove padding between product images - Palo Alto theme

[izabellaeileen]

Hi there!

I’m building on the Palo Alto theme & I’m looking to remove the padding between images on the default product page. This is the desired look I’d like to achieve - https://zuluandzephyr.com/collections/fall-24/products/olive-daisy-linen-dress

[mrashid_1]

please share screenshot and mark area

[izabellaeileen]

Here is my site now. Would like the gallery to mimic the one on this site - https://zuluandzephyr.com/collections/fall-24/products/olive-daisy-linen-dress full screen, no padding around images.

[mrashid_1]

let me check.

[mrashid_1]

please check

[izabellaeileen]

I’d like no padding around the images if possible. Do you need to see my site? I can share password and url.

[mrashid_1]

please share your site screenshot and mark area where you want to remove padding

[izabellaeileen]

[mrashid_1]

password?

[mrashid_1]

password?

[mrashid_1]

but i can’t see pasword option…

[izabellaeileen]

Try now. Password is lapl00

[mrashid_1]

[izabellaeileen]

Looks great! How do I implement on site?

[mrashid_1]

1. Login to Shopify Admin: Log in to your Shopify admin dashboard.

2. Navigate to Themes: From the left-hand menu, go to “Online Store” and then click on “Themes.”

3. Access Theme Code: Find the theme you want to edit and click on “Actions” > “Edit code.”

4. Locate CSS File: In the list of files on the left-hand side, locate and click on the file named theme.scss.liquid under the “Assets” folder. This is where you’ll typically add your custom CSS code.

5. open file theme.css and press ctr+f and enter
   .product-single__wrapper–grid .product-single__media-slider

   search this class and

   .product-single__wrapper–grid .product-single__media-slider {

   1. display: grid;
   2. grid-template-columns: repeat(2, minmax(0, 1fr));
   3. gap: 24px;

   }

   gap set 24px to 0px and save

[mrashid_1]

Please feel free to reach out if you have any further questions or need additional information.

[izabellaeileen]

Great thank you!!

Is there a way to remove the padding on the sides too? So it matches the design of the inspo site I provided. See screenshot.

[mrashid_1]

like this?