[Resolved] Porto theme, after translation CSS out of tune
This thread is resolved. Here is a description of the problem and solution.
Problem: If you're experiencing issues with CSS styles being out of tune after translating pages and categories using the WPML plugin, resulting in different styles and style bugs compared to the default language. Solution: We recommend checking if the issue might be related to theme settings that differ between the translated versions. In a similar case, we found that setting the container width to 1440 and ensuring proper container configuration in both the default and translated versions resolved the layout discrepancies. You can view a detailed explanation in this video: https://www.loom.com/share/52d87d3a8e2d45a8842713c7628076bc.
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. Should you need further assistance, please open a new support ticket at our 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.
Welcome to WPML support. If you check the LT version:
hidden link
The last item shwos correctly and the other ones not. I checked and there seems to be wrong tag or something closed in HTML that cause the issue.
Because for the EU version and that one last item in LT there is a wrapper called:
elementor-widget-container
But that is not showing on the other items.
I wonder if you used the normal Advanced Translation Editor to translate that page or you manually went to Elementor in LT version and did the changes there?
For now, I suggest that you update WPML to the latest version:
- IMPORTANT STEP! Create a backup of your website. Or better approach will be to test this on a copy/staging version of the website to avoid any disruption of a live website.
- Go to "WordPress Dashboard > Plugins > Add new > Commercial (tab)".
- Click the "Check for Updates" button.
- Update WPML and its addons there.
- Go to your Dashboard > Pages.
- Open the edit screen of the original page. You should see a pencil/circle/gear icon in the sidebar options under the "Languages" section.
- Make a small change, for example, add an extra blank space at the end of a sentence/paragraph.
- Save it.
- You should now see that a circular arrow appears beside the 2nd languages links, this means that an update is required.
- Edit the translation again and save it up to 100% translated.
--------------
For the Category page I did not find any differences between the EU and LT version when you showed in the video. Do I miss something? Cna you point our what you see different?
Hi, thank you for a reply. All translations were made via WPML, nothing was translated directly.
1) How can I update WPML? There is no update button on the "Plugins" page. And Also OTGS Installer is impossible to activate. Please check the video hidden link
2) the category width is different. On the LT version it is wide and the whole text and images get bigger-zoomed.
- IMPORTANT STEP! Create a backup of your website. Or better approach will be to test this on a copy/staging version of the website to avoid any disruption of a live website.
- Go to WP Dashboard > Plugins page.
- From the top Click the Add New button.
- On that page you will see a series of tabs, click the Commercial tab (check the screenshot)
- Now you will be represented with a screen that has a button called "Check Updates".
- First click that button to make sure the latest version is retrieved and then select the plugins and at the bottom of the screen select the Activate checkbox and click the download button.
After that please follow the next set of steps I mentioned:
- Go to your Dashboard > Pages.
- Open the edit screen of the original page. You should see a pencil/circle/gear icon in the sidebar options under the "Languages" section.
- Make a small change, for example, add an extra blank space at the end of a sentence/paragraph.
- Save it.
- You should now see that a circular arrow appears beside the 2nd languages links, this means that an update is required.
- Edit the translation again and save it up to 100% translated.
If the problem persists, I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard after you make sure that you have a backup of your website.
It is absolutely important that you give us a guarantee that you have a backup so if something happens you will have a point of restore.
Thank you for the video and login information. I checked and could not find why this might happen,
The thing is that for further investigation I will need to deactivate some plugins and turn the WPML separate domain mode to directory mode which will take down the live website.
Would you please ask your hosting service provider to provide a copy/staging version of the website so we can do an investigation further to find out what might be the problem cause?
Alternatively, if you give us permission we can try to copy your website using the Cloudaways migratory plugin.
Thank you for the login information. The width issue of the container of the website also seems to be fixed.
I created a video explaining the details:
hidden link
Video Summary:
The video explains that the issue with the layout difference between the right and left sides appears to be fixed. The problem might have been caused by a new theme in the English and Lithuanian versions. To resolve it, safe changes were applied in both the Lithuanian and English versions, ensuring the correct layout settings (container width set to 1440 and proper container configuration) are in place. The support staff invites further questions if any issues arise.
