Blog, Website & Page Publishing

mikkelkumler
Participant

White space on Landing Pages (Mobile Version)

SOLVE

When I visit my website on mobile, I can swipe to the sides on multiple pages (see image). However, there are some pages where this doesn't happen, and I can't figure out where or what I need to adjust. If I figure out the problem on one of the pages, I think I can adjust the other.image1.pngimage0.png

 

Landingpage: www.logbuy.dk 

 

Can someone help?

0 Upvotes
1 Accepted solution
Markestac
Solution
Member | Gold Partner
Member | Gold Partner

White space on Landing Pages (Mobile Version)

SOLVE

Hi @mikkelkumler,

 

If you scroll the page from top to bottom, you will see a white space until the "Husk LogBuy Appen" section animation completes. Once the animation finishes, the mobile design works fine.

 

You are using AOS animation for section transitions. In the "Husk LogBuy Appen" section, the slide-in animation from right to left is causing it to take up space on the right side. There are two possible solutions for this:

 

  1. Change the transition direction from left to right.
  2. Use the following CSS code to hide the overflow:
.body-wrapper {
    overflow-x: hidden;
}

 

Please let me know if that helps solve your query.

 

View solution in original post

6 Replies 6
Markestac
Member | Gold Partner
Member | Gold Partner

White space on Landing Pages (Mobile Version)

SOLVE

Hi @mikkelkumler,

 

This issue typically occurs when a specific module on your website has a greater width than the other modules. For example, on the www.logbuy.dk page, the testimonial slider has a wider width compared to the other sections, which is causing the extra white space and allowing side swiping on mobile devices.

 

logbuy.png

 

To resolve this, you should adjust the width of the testimonial slider to match the width of the other modules. You need to identify the module on the other pages where you have the white space and adjust the width accordingly.

 

Please let me know if this helps resolve your query.

 

0 Upvotes
mikkelkumler
Participant

White space on Landing Pages (Mobile Version)

SOLVE

Thank you for the quick response! 

I tried this, and unfortunately it didn't work. 

0 Upvotes
Markestac
Solution
Member | Gold Partner
Member | Gold Partner

White space on Landing Pages (Mobile Version)

SOLVE

Hi @mikkelkumler,

 

If you scroll the page from top to bottom, you will see a white space until the "Husk LogBuy Appen" section animation completes. Once the animation finishes, the mobile design works fine.

 

You are using AOS animation for section transitions. In the "Husk LogBuy Appen" section, the slide-in animation from right to left is causing it to take up space on the right side. There are two possible solutions for this:

 

  1. Change the transition direction from left to right.
  2. Use the following CSS code to hide the overflow:
.body-wrapper {
    overflow-x: hidden;
}

 

Please let me know if that helps solve your query.

 

mikkelkumler
Participant

White space on Landing Pages (Mobile Version)

SOLVE

Thank you - it worked!

 

Apparantelty I can't use the animation from right to left. It causes me no trouble on other pages though? Check: https://www.logbuy.dk/b2b-indkoeb 

0 Upvotes
Markestac
Member | Gold Partner
Member | Gold Partner

White space on Landing Pages (Mobile Version)

SOLVE

Hi @mikkelkumler,

 

Glad to know that the solution worked for you.

 

I have checked the https://www.logbuy.dk/b2b-indkoeb shared and it shows me the same issue until all the right-to-left animations complete.

 image.png

0 Upvotes
mikkelkumler
Participant

White space on Landing Pages (Mobile Version)

SOLVE

Yeah, just saw that.

 

Thank you! Very helpful! 🙂

0 Upvotes