How to remove the extra white space underneath the slider in Debut theme for mobile devices

[anmolRattan]

I am having a issue. I added the slider to my home page. It looks perfect on a laptop but, on a mobile device it is having an extra white space underneath it. 

Could anyone help me with this?

Link to shop anmolrattan.com.au 

[Lana]

Hello @anmolRattan!

Since you're using the Debut theme, which is one of our free themes, our team will be able to take a closer look at this for you! Please reach out to us through this link here so that they can investigate it. The reason that I am redirecting you is because we are not currently able to look into account details via the Shopify Community.

I also wanted to mention that I checked out your store since you included a link - your products are absolutely stunning, and I love the way you showcase your main collections on the homepage so that they are easy to access. One thing I noticed was that at the very bottom of your footer, you still have the Powered by Shopify text, so I thought it would be useful for you to look into this guide here on how to remove it. Removing it just further contributes to a more finished and professional look on your store. 

[LitCommerce]

Hi @anmolRattan,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
	.index-section--slideshow{
		padding-bottom: 0px !important;
	}
}

Hope it helps!

[anmolRattan]

did not work

[LitCommerce]

Hi @anmolRattan,

Can you re-add the code, I will help you test it.

Because when I added the code, it worked fine. https://i.imgur.com/JbnUSzL.png

Hope it helps!

[anmolRattan]

It looks like that because I made the image beneath have fixed width, so the white space doesn't look awkward. 

I have attached how it looks with the added code and the image with overlay removed(originally I didn't want that segment, its just there to make it look normal for now)

It does makes a difference the white space has gotten smaller than before, but still is there. 

P.S. also I swapped images around, so in the attached image the first item is a slider not an image with overlay (whereas before it was a separate image) 

Now I am going to change it back to have an image with overlay between sliders and collections. If you are trying it out, try removing the overlay image and then test. 

[LitCommerce]

Hi @anmolRattan,

You want to display like this on mobile: https://i.imgur.com/nGLLcUt.png

Please add code:

@media only screen and (max-width: 749px){
	.index-section--slideshow{
		padding-bottom: 0px !important;
	}
	.template-index .index-section{
		padding-bottom: 0px !important;
		padding-top: 0px !important;
	}
	.template-index .index-section .page-width{
		padding: 0px !important;
	}
}

Hope it helps!

[anmolRattan]

Almost done.

It is so weird , in your image it shows perfect, but in mine there is very small. I mean, its not that bad I can live with it. 

Let me know if it you can find a solution to remove it completely, if not then I will just accept it as it is. 

I have removed the overlay to make it easy for testing for you. 

[LitCommerce · Accepted solution]

Hi @anmolRattan,

Please add code:

@media only screen and (max-width: 749px){
  .index-section--slideshow+.index-section--flush {
     margin-top: 0 !important;
  }
}

Hope it is clear to you.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[anmolRattan]

Yes this is it.