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

 

Accepted Solution (1)

Accepted Solutions
Simranjeet
Shopify Partner
76 9 16

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

View solution in original post

Replies 8 (8)
Simranjeet
Shopify Partner
76 9 16

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

Cheers!

StompStore
New Member
4 0 0

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

My store is www.stompstoreshop.com

LitExtension
Shopify Partner
4677 955 981

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
Check out our Shopify migration app to migrate your online store to Shopify
Simranjeet
Shopify Partner
76 9 16

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

 

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.

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

 

 

 

Simranjeet
Shopify Partner
76 9 16

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