Debut theme product page images have a gap

[Vinette]

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 

[DigitalArtisans]

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

[Vinette]

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

[ChoosiZon]

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

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

[ChoosiZon]

---

@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

[Vinette]

this broke the website completely

[Vinette]

Hello,

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

[ChoosiZon]

---

@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.

[ChoosiZon]

---

@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.