A space to discuss online store customization, theme development, and Liquid templating.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hey everyone,
i followed this instruction to reduce the size of the main product image, however, the product title/description remains at the same width, leaving a very big empty space on the right of the screen (see here)
Is there any way to expand the width of the description so that it fills up the empty space nicely?
Appreciate your help!
Z
Solved! Go to the solution
This is an accepted solution.
Hi @Toki . Go to assets/section-main-product.css.
Find this element:
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 36%;
width: calc(36% - 0.5rem);
}
And change value of 'max-width'. For example:
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 42%;
width: calc(42% - 0.5rem);
}
This is an accepted solution.
Hi @Toki . Go to assets/section-main-product.css.
Find this element:
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 36%;
width: calc(36% - 0.5rem);
}
And change value of 'max-width'. For example:
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 42%;
width: calc(42% - 0.5rem);
}
Thank you so much! this worked perfectly
@Toki you're welcome. 🙂
@Toki ,
I have checked your store, It will not done by simple css. You need to check the code and and adjust the code to design proper layout. It is time consuming task.