Debut theme gap between slider photo and slider

Solved
StompStore
New Member
4 0 0

Hi, I am getting a large gap beneath my slider photo area and my slider on the debut theme.

Has anyone got any suggestions on how to resolve this? Thanks in advance!

StompStore_0-1625786831365.png

 

0 Likes
Simranjeet
Shopify Partner
71 9 14

Hey @StompStore
Take a look at this solution and see if this works.

Cheers!

0 Likes
StompStore
New Member
4 0 0

Thanks Simranjeet, however it doesn't appear to have changed anything.

My store is www.stompstoreshop.com

0 Likes
LitExtension
Shopify Partner
1235 162 219

I checked and it shows fine: https://i.imgur.com/LiMbNkE.png
When you resize the screen on desktop, some JS will need to reload, so you need to reload the page( F5 page ).
Hope it clear to you.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Simranjeet
Shopify Partner
71 9 14

This is an accepted solution.

Hi @StompStore

This should work. Let me know.

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Assets > theme.scss.liquid and paste the code below at the end of the file

 

@media only screen and (max-width: 480px) {
  #ProductMediaGroup-product-template > div.product-single__media-group.product-single__media-group--single-xr.slick-initialized.slick-slider.slick-dotted > div { 
   max-height: 300px !important;
}
}

 

Hope this will help. 

Cheers!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on simranjeetsingh6076@gmail.com

StompStore
New Member
4 0 0

Thanks! That is much better!

Is there any way to close the gap even more in red circles below?

StompStore_0-1625825440587.png

 

0 Likes
amywatson
New Member
1 0 0

Does anything else overlap? Have you tried adding a new class with margins to the overlapping element? Actually I have been facing the same issue with my store as well. My product page for skinny grunge pant had the same issue. Half image just show and the bottom appeared which was not normal.

0 Likes
StompStore
New Member
4 0 0

Nothing overlaps, the layout is fine at the moment, however I am finding that there is too much distance between the product image, the slider and the colour selection box, so when people visit my site and try to select a colour on mobile version they do not see the image change to that colour as the gap is too large. This results in them being confused and leaving. Due to this, I'm trying to minimise all of the spacing between everything for mobile version to try to fix this issue. 

Ideally, I'd like to get the Qty & Color selection boxes on the same line and delete that useless line that I've put an 'X' through in below pic - if anyone knows how to do all of that, please let me know!

StompStore_2-1625829416436.png

 

 

 

0 Likes
Simranjeet
Shopify Partner
71 9 14

Hey @StompStore

That was all I can do without accessing the theme code. For further assistance, I need to send collaborator access request to the store. If you are interested you can contact me

Thank you

0 Likes