Remove padding between product images - Palo Alto theme

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

please share screenshot and mark area

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.

let me check.

please check

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

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

password?

password?

but i can’t see pasword option…

Try now. Password is lapl00

Looks great! How do I implement on site?

  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

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

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.

like this?