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

Store Design
1

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.

image_123986672.JPG
image_123986672.JPG1125×2436 218 KB

Could anyone help me with this?

Link to shop anmolrattan.com.au

2

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.

3

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!

4

did not work

5

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!

6

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)

unnamed.jpg
unnamed.jpg1125×2436 395 KB

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.

7

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!

8

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.

9

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.

10

Yes this is it.