Mobile Debut view theme - sections overlapping with each other

[Inesso]

Hi All!

My store is www.themainthingplanner.com - On mobile view the sections clash with each other, meaning that part of my slideshow photo is cut out as in the attached. The sections are fine on desktop view but I do not know how to fix mobile - can anyway help me please? 

Thanks! 

 

[KetanKumar]

@Inesso 

thanks for the post again and sorry for this issue 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

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

[Inesso]

Hi @KetanKumar - Thanks for the reply, I've added the code but the gap is still the same!

[SagarSukhanandi]

Hello @Inesso 

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

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

Here is the image how it will look

[Inesso]

Hi Thank you for your reply

 

 

- I've added the code, but am still getting the same result - in both the Shopify Admin preview and on my own mobile device (see attached screenshots)!

[SagarSukhanandi]

@Inesso 

Find and remove below line of code from your css

 top: -1.1rem;

[KetanKumar]

@Inesso 

sorry, for that i can't see above my code 

can you please add me on staff so i will quick fix.

[Inesso]

Hi @KetanKumar - unfortunately, this issue is still not solved 

[SagarSukhanandi]

@Inesso Follow this steps to fix your issue

[Inesso]

Hi @SagarSukhanandi - Many thanks for your reply - unfortunately the steps are not listed - can you repost please?