This thread is resolved. Here is a description of the problem and solution.
Problem: If you're experiencing issues where the post format and structure break after translating into a right-to-left (RTL) language, it might be due to missing CSS files in the RTL stylesheet. Solution: We recommend checking if your theme's RTL CSS file (style-rtl.css) includes all necessary CSS files. In a case we investigated, adding the following imports to the style-rtl.css resolved the issue:
Please ensure to back up your site before making these changes. Additionally, it would be beneficial to contact the theme author to include these CSS files in the theme's RTL stylesheet to prevent similar issues.
If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.
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.
Background of the issue:
I am trying to create a post translation and its format and structure breaks in the translated version for some reasons. Here is the link to the page where the issue can be seen: hidden link
Symptoms:
The post format and structure break after translation.
Questions:
What could be causing the post format and structure to break after translation?
Can you please check and let me know what could be the issue?
Thank you for contacting WPML Support. This type of issue usually happens when the CSS is not loaded properly on your site. So, I’ve viewed the source of the page and found out that the English site is loading the style.css file which is importing the 3 other CSS files as you can see in the attached screenshot.
And in the Arabic language it is loading the style-rtl.css file which doesn't include any other CSS file in it which seems necessary as you can see in the attached screenshot.
Usually, the theme includes style.css files in all languages and overrides the CSS using the RTL CSS file in RTL languages.
I suspect this is the reason for this issue. I’m going to replicate this issue at WP fresh site and will get back to you with an update soon.
- I’ve followed the below steps in order to reproduce this issue at fresh WP site:
1. Installed/activated the Aone theme.
2. Set the English language from the Settings >> General > Site Languages field.
3. Created a post and view it and it shows correctly as you can see in the attached screenshot.
4. Changed the language to Arabic from Settings >> General > Site languages field and the layout got broken as you can see in the attached screenshot.
So, this experiment states that the Alone theme doesn’t support RTL layout or it somehow missed thost three CSS files which should be included.
- To fix this issue, I’ve opened the style-rtl.css file and added those missing CSS files which exist in the LTR languages but not RTL languages and the issue is gone.
You may also follow the same steps after taking a backup on your site.
- I suggest you please ask the Alone theme author about this issue and ask them to include the fix in the theme files so that it will work fine in RTL layout.
Here is the fresh WP site auto login URL: hidden link
Here is the style-rtl.css file which I updated: hidden link
Please let me know if this resolves the issue or if you need further assistance with this issue.
I have followed the same steps as you suggested and inserted the required 3 line code in alone theme stylertl file but the issue still remains. I am attaching image.
Kindly check and let me know if i have done something wrong here? Thanks
I have inserted the code you provided in stylertl.css but in arabic version it is still not importing the css files that we want for stylertl.css. Attaching Screenshot.
Thanks
