[Resolved] Arabic version of site doesn't load correctly on mobile

[Norman]

Hi team GP,

I’ve added the arabic translation on my website using WPML, but somehow it adds a lot of empty space on the left side. This is on mobile only.

When loaded, the site seems empty, but when scrolled to the right the site appears.

It is most notable on these subpages:
– https://www.fairfieldcollege.nl/inburgeringscursus/?lang=ar
– https://www.fairfieldcollege.nl/contact/?lang=ar

These subpages are slightly affected:
– https://www.fairfieldcollege.nl/home/?lang=ar
– https://www.fairfieldcollege.nl/over-ons/?lang=ar

Do you have any idea what might be happening?

Thank you!

[Leo]

Hi there,

I see some console errors on the page.

Can you try #1 here to eliminate plugin conflicts first?
https://docs.generatepress.com/article/debugging-tips/

Let me know 🙂

[Norman]

Hi Leo,

Thanks for you respons. I deactivated almost all plugin, but it made no difference

[Tom]

Hi there,

I narrowed it down to a bug in WPForms.

Specifically, this CSS:

div.wpforms-container-full .wpforms-form .wpforms-field-label.wpforms-label-hide, 
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel.wpforms-sublabel-hide {
    position: absolute;
    left: -99999px;
}

They may need to make it so it uses right instead of left on RTL sites.

[Norman]

Hi Tom,

Thanks for replying.

When you say ‘they’, you mean there isn’t something I can do about it?

[Tom]

You can try doing this:

.rtl div.wpforms-container-full .wpforms-form .wpforms-field-label.wpforms-label-hide, 
.rtl div.wpforms-container-full .wpforms-form .wpforms-field-sublabel.wpforms-sublabel-hide {
    position: absolute;
    left: auto;
    right: -99999px;
}

[Norman]

That improved it a lot! There is still some strange horizontal scrolling possible, but as for functionality it is solved.

Thanks!

[Tom]

No problem 🙂

[Author]

Posts