Solved

Reduce Padding On Product Page Margins - Dawn Theme

alphaherm
Tourist
10 1 1

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.
Screen Shot 2024-05-29 at 5.18.30 am.png

To 2.
Screen Shot 2024-05-29 at 5.17.16 am.png

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

Thanks!

Accepted Solution (1)

alphaherm
Tourist
10 1 1

This is an 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 */
}

View solution in original post

Replies 8 (8)

saim007
Shopify Partner
531 68 87

@alphaherm 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>
Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
alphaherm
Tourist
10 1 1

Hi,
Thanks for trying! But nothing happened 😞

saim007
Shopify Partner
531 68 87

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

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
alphaherm
Tourist
10 1 1

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

saim007
Shopify Partner
531 68 87

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

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
alphaherm
Tourist
10 1 1

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

EFOLI-Emilia7
Shopify Partner
349 10 38

Hello @alphaherm,

Please add the code into base.css file.

@media screen and (min-width: 750px) {
    .page-width {
        padding: 0 1rem !important;
    }
}
Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants

alphaherm
Tourist
10 1 1

This is an 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 */
}