Reducing product page width on desktop view

[technase]

Hi,
Can someone help me in reducing the width of the product page and adding left and right padding, but only for the desktop view?

page link: https://libevada.myshopify.com/products/full-fundamental-bundle-all-6

storefront password: rtugha

Any help is greatly appreciated

[GTLOfficial]

Hello @technase

Go to online store ---------> themes -------> actions ------> edit code------->theme.css
add this code at the end of the file.

@media only screen and (min-width: 769px) {
.page-width {
padding-left: 100px; /* you can adjust the padding according to your requirement*/
padding-right: 100px;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[BSS-TekLabs]

@media only screen and (min-width: 600px) {
    .main-content .page-width {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
}

Add this code to last line file theme.css @technase

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[technase]

Thank you but it changes all the pages - I want only the product form area to be reduced.

[technase]

Can we only add padding to the area on the screenshot below. I don’t want to add padding to all the pages, just want to add it to the selected area on desktop view

[niraj_patel]

Hello @technase

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { div#shopify-section-template--22985094299983__main-product .page-width { padding: 0 10% !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

option 1

option 2

Do you want option 1 or 2? @technase

[technase]

Option 2 please

[BSS-TekLabs]

Code for option 1:

@media screen and (min-width: 750px) {
    .featured-product.product--thumbnail {
            padding-left: 70px !important;
    padding-right: 70px !important;
    }
}

Code for option 2

@media screen and (min-width: 750px) {
    .featured-product.product--thumbnail {
            padding-left: 200px !important;
    padding-right: 200px !important;
    }
}

[BSS-TekLabs]

@technase please check it!