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

Solved
anmolRattan
New Member
5 0 0

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

 

Could anyone help me with this?

 

Link to shop anmolrattan.com.au 

Accepted Solution (1)

Accepted Solutions
LitCommerce
Trailblazer
286 71 72

This is an 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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 9 (9)
Lana
Shopify Staff
320 38 42

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. 

 

Lana | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

LitCommerce
Trailblazer
286 71 72

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
LitCommerce
Trailblazer
286 71 72

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
anmolRattan
New Member
5 0 0

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

 

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
Trailblazer
286 71 72

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
anmolRattan
New Member
5 0 0

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
Trailblazer
286 71 72

This is an 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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post