Palo alto- remove padding from product images

Store Design
, ,
1

Hello guys,

I’m building on the Palo Alto theme & I’m looking to remove the padding between images on the default product page so that the image fits the screen fully on mobile so there is no white space around the sides or padding, can someone help me with this please?

2

Hey @Tommyboi

Share your store URL and Password if enabled.

Best Regards,

Moeed

3

Hey, I haven’t bought the theme yet as wanted to make sure I could do this before I bought it, currently customising on demo

4

Can you share the preview URL of the draft theme then?

Best Regards,

Moeed

5

https://jnxro1f4t291f69q-84536951126.shopifypreview.com

6

Hi @Tommyboi

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 767px){
.product-single .wrapper--full-padded {
    padding: 0;
}

.product-single__details {
    padding: 0 var(--gutter-mobile);
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

7

amazing thanks! Can I add it to the custom CSS section on the theme editor instead?

8

Yes, you can.

9

that worked! thanks so much bro.

Any chance you could help me make the spacing less in the collection page between product images? so less of a gap :slightly_smiling_face:

10

Sure, but the preview is expired.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!