Arabic Translation Causing Issues With Elementor Elements Alignment

This thread is resolved. Here is a description of the problem and solution.

Problem:
After adding the Arabic language, some elements show incorrect alignment.

Solution:
The issue is related to RTL CSS used for Arabic, you can use the CSS :lang() selector to change the alignment or text direction for elements in a specific language. Please check here for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/:lang

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: Not WPML issue

This topic contains 7 replies, has 2 voices.

Last updated by mohammedR-13 1 year, 12 months ago.

Assisted by: Mohamed Sayed.

Author	Posts
July 6, 2023 at 1:35 pm #13960429
mohammedR-13	I am trying to: Correctly align elements after translating the site but It bugs every single time, I think because of the Arabic language overlapping or something. Link to a page where the issue can be seen: radyinterior.ae/faq I expected to see: Correctly Aligned Elements Edit: I'd like to add that it has been causing issues with a lot of other elements as well, such as prefixes and suffixes on icon boxes in Arabic translated language.
July 6, 2023 at 5:50 pm #13962563
Mohamed Sayed	Hi Mohammed, Thanks for contacting WPML support. This is not an issue with the translation, it happens due to the RTL CSS used for Arabic. This is handled by the theme as WPML doesn't add CSS for the translated elements. Please see here: hidden link I suggest using the CSS :lang() selector to change the alignment or text direction for those elements in Arabic. Please check here for more details: hidden link Kind regards, Mohamed
July 7, 2023 at 5:20 am #13963975
mohammedR-13	The problem is coming in english pages, not the arabic ones, and if the css:lang() is the fix, where should I put it? In the custom/additional css panel in elementor? Thank you for your time
July 7, 2023 at 6:28 am #13964503
mohammedR-13	Also, in the arabic faq page, my header isnt showing up, it also has transparency bugs, doesnt happen on the home page but on others it does
July 7, 2023 at 1:48 pm #13968409
Mohamed Sayed	Hi, You can add the custom CSS to Appearance > Customize > Additional CSS. I think also Elementor's custom/additional CSS section should work if the page was built with Elementor. Regarding the header issue in the FAQ page, could you please clear the browser cache or check on another browser? I suggest this because I can't see any issues there, please check this recording: hidden link
July 8, 2023 at 5:50 am #13970853
mohammedR-13	The header issue only happens in the blogs if the transparency feature is turned on, if it is off, it is not bugging out, and the problem which I had for english faq pages is also happening for Arabic pages, such as Interior Design in Arabic and Interior Fit Out in Arabic New threads created by Mohamed Sayed and linked to this one are listed below: https://wpml.org/forums/topic/split-header-issues-on-translated-pages/
July 8, 2023 at 4:32 pm #13971731
Mohamed Sayed	For better support, we handle one issue per ticket so I've created a new ticket for the other issue you mentioned. Kindly mark this ticket as resolved and we will continue the discussion here: https://wpml.org/forums/topic/split-header-issues-on-translated-pages/ Kind regards.