Large Space On Product Pages - Gaps between image and description

[FloB92]

Hi,

I have a massive gap on my product pages - only showing on mobile.

I have tried adding codes many times to my theme as per the other questions here but I can’t get it to work.

Any suggestions?

Thanks in advance

[Moeed]

Hey @FloB92

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[FloB92]

Thank you!

It’s https://dailygood.co.nz

[Dan-From-Ryviu]

Hi @FloB92

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to solve the issue

@media (max-width: 749px) {
.product-single .owl-carousel .owl-stage-outer {
height: fit-content !important;
}
}

[DaisyVo]

Hi @FloB92

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 (max-width: 750px){
.product-single__media {
    height: fit-content !important;
}
.product-single__medias.product-images-slider-mobile.product-single__thumbnails > .owl-stage-outer.owl-height {
    height: fit-content !important;
}
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[FloB92]

Fantastic thank you so much, this worked perfectly

[Dan-From-Ryviu]

Happy I could help!