Remove blank white space on mobile theme Debut

Highlighted
New Member
5 0 0

Hey guys,

I'm currently using the debut theme on my store www.trvlstyle.de. On the top of the page I'm using a slideshow and the problem is that on the mobile theme there is a huge white blank space afterwrds (see the screenshot). This white space don't show on the desktop version. I found out that it would be the code I added to the theme.scss.liquid so that the header will not be cropped on mobile devices. I used this one:

/* --tim: force slideshow resize instead of cropping */
.slideshow{
    height:auto; /* override the height value from the section.seettings */
}
.slideshow__image, 
.slideshow__link {
    position:relative; 
  }
.index-section {
  padding-bottom:0px;
}
/* START CSS Code For CSP App */
.product-form {
align-items: flex-start !important;
}

When I delete it completely the white space disappears but my header is of course now cropped. Could someone tell me which part of the code I have to fix? Thanks :)

0 Likes
Highlighted
Shopify Partner
66 2 9

Hello Jonas!

 

Looks like these CSS rules are affecting slider's height (see screenshot). Remove them and everything shiuld look nice on mobile devices.

Developer @ MageWorx | Explore our Shopify apps | Need theme customization or migration? Reach us at apps@mageworx.com
0 Likes
Highlighted
New Member
5 0 0

Hey Vadzim,

thank you very much for your respond! Unfortunately my CSS skills are very limited. Could you tell me exactly which part I have to remove and where I can find it?

Thank you very much for your help!

 

0 Likes
Highlighted
Shopify Partner
66 2 9

Jonas,

you need to open Debut theme in editor (In your Shopify admin: Online Store -> Themes -> Actions -> Edit code).

Then, find theme.scss.liquid file using searchbar of the editor.

Locate and remove following pieces of code from that file: 

.slideshow.slideshow--medium {
    height: 500px
}

@media only screen and (min-width: 750px)
.slideshow.slideshow--medium {
    height: 650px;
}

The gap should disappear and slider will look like this: https://monosnap.com/file/wTLp8sSbfAJ5kx7l6BvObleDaFPxan

Developer @ MageWorx | Explore our Shopify apps | Need theme customization or migration? Reach us at apps@mageworx.com
0 Likes
Highlighted
New Member
5 0 0

Thank you! But I can't the pieces in the theme.scss.liquid. Searching in the Search does not show those pieces. 

0 Likes
Highlighted
New Member
1 0 0

Hi Vadzim,

How did you customize your navigation?? I really want to customize the fonts/locations of the links. Thanks!

0 Likes
Highlighted
Tourist
18 0 2

Hello Vadzim,

how are you? I am writing to you about EKOOK (www.ekook.com, password: dawmao). It seems that the Image+text section "Welcome to EKOOK!" is correctly displayed in the desktop version but it will not be showed properly in the mobile one, with a white gap with the image only and no text.

Would it be possible to sort this out please?

Thank you very much.

 

1 Like
Highlighted
Shopify Partner
4447 667 1390

@Ekook 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.featured-content--text-container {
    color: #444444;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
18 0 2

Thank you very much for your kind help.

 

0 Likes