Remove padding product image desktop | Dawn

[Sportingoodz]

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
this is actually how my website is. 
 

[topnewyork]

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 </head>

<style>
@media screen and (min-width: 750px) {
    .page-width {
        padding: 0px 0rem;
    }
}
</style>

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

[Sportingoodz]

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 ! 

[pawankumar]

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" %}
<style>
.page-width {
padding-inline: 0px !important;
}
</style>
{% endif %}

Please like and accept the solution if it works for you

Thanks!

[Sportingoodz]

this one doesn't work, thanks for trying 🙂

[LizHoang]

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: 

Best,

Liz

[Sportingoodz]

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 ! 

[LizHoang]

Hi @Sportingoodz , you can try this code 

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

Result: 

[Sportingoodz · Accepted solution]

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;
}
}

[mt686]

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!