Debut theme product page images have a gap

Vinette
Tourist
7 0 1

Hi there everyone,

on my website www.diygirls.co.za - my single product pages have a gap between the main image and the product gallery.
Please can someone assist me to fix that gap

Please see screenshot below of issue 

 

Screenshot 2021-05-15 at 19.32.47.png

0 Likes
DigitalArtisans
Shopify Partner
335 45 59

Hello @Vinette !

 

You can remove the gap between images by following these steps:

 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

 

@media only screen and (min-width: 750px){

.product-single__thumbnails-item--medium { margin: 0px !important }

}

Copy

 

Hope this helps!

 

Thanks,

Digital Artisans

Hatim Ayoub | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted
Vinette
Tourist
7 0 1

 I am unsure why, but this unfortunately didn't resolve the issue  
is there anything else I could possibly try?

0 Likes
ChoosiZon
Navigator
314 54 83

Hey, your theme.scss.css was edited and minified.

What i would do is rename it to theme.css as a 1st troubleshooting.

Create
Launch
Donate
0 Likes
ChoosiZon
Navigator
314 54 83

@Vinette wrote:

 I am unsure why, but this unfortunately didn't resolve the issue  
is there anything else I could possibly try?


Hey, just found your problem is in product-template.liquid,most likely

Create
Launch
Donate
0 Likes
Vinette
Tourist
7 0 1

this broke the website completely

0 Likes
Vinette
Tourist
7 0 1

Hello,

Please can you perhaps advise where and how I could change the file code to fix the error

0 Likes
ChoosiZon
Navigator
314 54 83

@Vinette wrote:

this broke the website completely


@Vinette ,

When you change it to theme.css you must also change the file name in your head section to theme.css.This line you can find in your theme.liquid file under Layout.

 

1234.png

Create
Launch
Donate
0 Likes
ChoosiZon
Navigator
314 54 83

@Vinette wrote:

Hello,

Please can you perhaps advise where and how I could change the file code to fix the error


If you willing to follow a few steps maybe we can identify and fix the issue.

1st go to your theme code editor under Sections,find product-template.liquid , copy everything above the starting {% schema %} tag and paste here,so we can see the issue.

Remember the position as you may have to replace the edited code to same position.

345.png

Create
Launch
Donate
0 Likes