Mobile Debut view theme - sections overlapping with each other

Inesso
Tourist
34 1 7

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! 

 

Screenshot 2021-02-23 at 15.50.49.png

KetanKumar
Shopify Partner
14296 1663 5142

@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;}
}

 

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
0 Likes
Inesso
Tourist
34 1 7

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

0 Likes
SagarSukhanandi
Tourist
115 18 34

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

header-overlap.PNG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
Inesso
Tourist
34 1 7

Hi Thank you for your reply

Screenshot 2021-02-23 at 18.02.12.png

IMG_1262.PNG

- 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)!

 

 

0 Likes
SagarSukhanandi
Tourist
115 18 34

@Inesso 

Find and remove below line of code from your css

 top: -1.1rem;

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
KetanKumar
Shopify Partner
14296 1663 5142

@Inesso 

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

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

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
0 Likes
Inesso
Tourist
34 1 7

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

0 Likes
SagarSukhanandi
Tourist
115 18 34

@Inesso Follow this steps to fix your issue

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
Inesso
Tourist
34 1 7

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

0 Likes