Increase spacing between product image and description

Increase spacing between product image and description

letsgetwasted
Explorer
54 1 9

Hi,

 

How can I increase the spacing between my product image and text, as well as make the text portion narrower?

 

Attached photo of current and ideal

 

page here: https://www.wastd.world/products/multi-purpose-serving-platter

 

Screenshot 2024-10-31 at 9.05.04 PM.png

Replies 2 (2)

Moeed
Shopify Partner
5827 1584 1884

Hey @letsgetwasted 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product.grid {
    gap: 7rem !important;
}
.grid__item.product__media-wrapper {
    width: 40% !important;
    max-width: 40% !important;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    width: 50% !important;
    max-width: 100% !important;
}
}
</style>

RESULT:

Moeed_0-1730380916863.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


DaisyVo
Shopify Partner
308 48 42

Hi @letsgetwasted 

 

I hope you are well. You can follow our instructions below: 

 

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

 

Here is the code for Step 3: 

 

@media screen and (min-width: 768px) {
    body .product.grid {
       gap: 10% !important;
    }
body .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    width: 40% !important;
    }
}
.product__description {
    max-width: 44rem;
}

 

 

image (10).png

Please let me know if it works. Thank you!

 

Best,

Daisy - Avada Support Team. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Explore other solutions
here. Live Chat Support is available 24/7.