Removing space on product page on debut theme

Solved
Highlighted
New Member
4 0 0

Hi,

My website www.sustainablesuperstore.com has a huge space between the main image and the thumbnails of the other images, and between the thumbnails and the product form. Could anyone show me how to get rid of the white space, please :) 

IMG_0030.JPGIMG_0029.JPG

0 Likes

Success.

Explorer
63 13 17

At the bottom of assets/theme.scss.liquid add:

 

/*================ Custom ================*/
.product-single__photo.js-zoom-enabled.product-single__photo--has-thumbnails {
  height: auto;
}
Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
0 Likes
New Member
4 0 0

That's great - it solves the problem of the white space between the main image and thumbnails. Do you have a piece of code that could do the same between the thumbnails and the product info? THanks

0 Likes
Explorer
63 13 17

Cool, thumbnails placed from left to right. You can see it for product https://sustainablesuperstore.com/collections/all-products/products/bamboo-fibre-coffee-cup-350ml

I'd say current usage is better then in reverse :)

 

 

 

Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
0 Likes
New Member
4 0 0

I don't understand. I think it only happens on the mobile website. Is there  a way to fix it?

0 Likes

Success.

Shopify Partner
84 16 20

Hello @FreddieK_01 

 

Please add below CSS code in your css at bottom and it will fix your problem :)

 

 

.slick-slide{height:auto!important;}

 

 

Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com
Skype: parthbhut7

2 Likes
Shopify Partner
84 16 20

Hello @FreddieK_01 

 

Please add below CSS code in your css at bottom and it will fix your problem

 

.slick-slide{height:auto!important;}

 

Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com
Skype: parthbhut7

0 Likes
New Member
4 0 0

Perfect, that has solved it! Thank you!

0 Likes