Reduce Padding On Product Page Margins - Dawn Theme

[kingbeanz]

Hi,

I want to widen reduce the padding on the side of my product page such that the product images stay the same size but I am able to have a wider column for the product description.

I want it to go from 1.


To 2.


URL: https://www.vntura.com/products/ultra-light-down-puffer-jacket
Pwd: taylte

Thanks!

[saim007]

@kingbeanz Go to edit code > open theme.liquid file > find for </body> tag and paste below code 

<style>
@media (min-width: 990px){
.product--large:not(.product--no-media) .product__media-wrapper{
max-width: 50%;
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.product--large:not(.product--no-media) .product__info-wrapper{
max-width: 50%;
        width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
</style>

[kingbeanz]

Hi,
Thanks for trying! But nothing happened 😞

[saim007]

I checked your code you didn't placed the code in the file so how it will work?

[kingbeanz]

I did try but then I deleted. I put back now so you can see.

[saim007]

Without access I can't help you because I have to change the code for effecting the store.

[kingbeanz]

So what you're saying is that it's not an easy fix?

[EFOLI-Emilia7]

Hello @kingbeanz,

Please add the code into base.css file.

@media screen and (min-width: 750px) {
    .page-width {
        padding: 0 1rem !important;
    }
}

[kingbeanz · Accepted solution]

Thanks for your help everyone, I actually figured it out:

Adding this to base.css works wonders.

#MainProduct-template--22649331319059__main {
--page-width: 200rem !important; /* Adjust the value as needed */
}