How do I reduce the white space below slideshow banner and the button on the mobile view home page.

Solved
Emurph35
Excursionist
36 0 13

Can someone provide me with coding to add or find to get rid of the white space between the slideshow and button on mobile vie as per below image:

 

93423049-BCF0-4ED4-987B-12B2956F20F2.png

 

Website url is https://now-lashes.myshopify.com and password is Thoffo 

dmwwebartisan
Shopify Partner
7346 1736 2319

This is an accepted solution.

@Emurph35 
Please add the following code at the bottom of your assets/custom.css file.

@media only screen and (max-width: 414px){
div#SlideshowWrapper-1601971335236 .slideshow {
    height: 226px !important;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
g33kgirl
Shopify Partner
278 77 93

This is an accepted solution.

Hi @Emurph35, how are you setting the height of the slideshow container? In your custom.css file, it is fixed to 320px so it's creating a lot of whitespace because the slideshow image itself is less than 320px.

You can add this code at the end of your custom.css file:

@media only screen and (max-width: 414px){
  div#SlideshowWrapper-1601971335236 .slideshow {
    height: 202.698px!important;
  }
}
@media only screen and (max-width: 375px){
  div#SlideshowWrapper-1601971335236 .slideshow {
    height: 202.698px !important;
  }
}

@media only screen and (max-width: 749px){
  .slideshow__text-wrap--mobile {
    top: -1rem;
  }
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
Emurph35
Excursionist
36 0 13

Thank you very much! This worked perfectly 

0 Likes