How can I adjust the product description width in the Mansory theme?

Technical Q&A
, ,
1

Hi everyone,
I’d like to chance the width of the PRODUCT.DESCIPTION column in our Mansory theme at www.spunkyssurfshop.com. But have yet not found the matching setting that I could apply in the THEME SETTINGS under CUSTOM CSS. Not sure if there is a setting that would steer this in the CSS or if I’d have to look into the PRODUCT-TEMLATE.LIQUID itself. Any ideas our suggestions are appriciated.
Best Axel

2

Hi @Axel66

Is this the content you are interested in?

view.png
view.png1920×641 353 KB

I found the CSS sections that represent the size of the product and its description in styles.scss.css.

In the mentioned section, I intentionally modified the width of the product to be “calc(100% - 650px)” and the width of the description to be 600px. As a result, the display area for the description appears larger than before.

The modification formula will be as follows: Please increase the width of the description to make it wider, while for the product section, you need to reduce its size to prevent the overall layout from breaking. You can achieve this by setting the width to “(100% - size of the description - 50)”. Here, 50 represents the margin-right of the product.

You can follow the steps below to find the file styles.scss.css:

1. Go to theme → edit code.

![view (18).png|2000x976](upload://qUjA9G1g0AKCfai5eauVuWw9S3Q.png)

2. Search for the file by entering its name into the file search box.

view (19).png
view (19).png1918×639 55.4 KB

3. In this file, pay attention to the two sections:

.product-gallery {
    margin-right: 50px;
    width: calc(100% - 350px);
}

.product-info {
    width: 300px;
}

These will be the values you need to modify.

1 Like
3

Thanks for the input. I’ll give it a try on Monday and let you know. Thanks
again for your help and support :slightly_smiling_face:

1 Like
4

Hey BSS-Commerce, although I ran late with looking into this and giving it a try to change it in our theme, I still want to express my thanks for helping with this, as the input did well help to improve the setup. The code in our theme did look a little different as the code related to .product-gallery and .product-info was in different places, but I managed to get that covered. Again thanks a lot!