Remove padding product image desktop | Dawn

Store Design
1

Hi ! Any idea how to remove padding on shopify dawn product page ?

Tried so many things…

link of the website : https://1jdgid-fx.myshopify.com/products/carlos-crewneck-forest

Would like to have this result

Objective
Objective1565×705 153 KB

this is actually how my website is.

actual
actual1565×716 143 KB

2

Hi @Sportingoodz

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Hi @Sportingoodz
I hope you are doing good
To remove size padding on product page
Use this code in theme.liquid before body closing tag

{% if template contains "product" %}

{% endif %}

Please like and accept the solution if it works for you

Thanks!

4

Hi @Sportingoodz

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.page-width {
    padding: 0 !important;
}

Result:

LizHoang_0-1739978580131.png
LizHoang_0-1739978580131.png636×516 142 KB

Best,

Liz

5

this one doesn’t work, thanks for trying :slightly_smiling_face:

6

Hi Liz, thanks for your message. I did try this but it removes the width of the entire page. I just want to remove the padding of the product image
thanks for the support !

prob.png
prob.png2348×1342 313 KB

7

Hi, thanks for your message. I did try this but it removes the width of the entire page. (check the screen)

I just want to remove the padding of the product image

thanks for trying !

prob.png
prob.png2348×1342 313 KB

8

Hi @Sportingoodz , you can try this code

product-info#MainProduct-template--24664982749566__main .page-width {
    padding-left: 5px !important;
    padding-right: 10px !important;
}

Result:

LizHoang_0-1739984281475.png
LizHoang_0-1739984281475.png1226×900 145 KB

9

perfect it work in files theme liquid. i removed completly padding left so it is perfect ! and with a media screen rule because otherwise add to cart on mobile is also affected

@media screen and (min-width: 990px) {
product-info#MainProduct-template–24664982749566__main .page-width {
padding-left: 0px !important;
padding-right: 10px !important;
}
}

10

Hey!

Looks like you’ve got plenty of code solutions, so I’ll there this out there: https://apps.shopify.com/easy-edits

Easy Easy (app I developed). You can adjust any element, including padding, by just clicking and changing or dragging and dropping. It’s free to test and you can keep any edits you make.

Best of luck!