Archive page layout messed up but on translation

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

Problem:
The client created a post category template that appears correctly in the default Spanish language but has layout issues in other languages. The translated version is missing several divs, causing the layout to be inconsistent with the default template.
Solution:
We resolved the layout issue by adjusting the block arrangement in the WPML Advanced Editor. Specifically, on the staging site, we moved the "WordPress Archive Output" block under the "Column" block and above the "WordPress Archive Loop" block. The client should replicate these changes in the English and French translations of the layout.
On the live site, we ungrouped the block items under the "WordPress Archive Loop" block, updated the translation layout, and cleared the SG cache. This adjustment made the layout in the English version consistent with the Spanish version.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, 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 the problem persists, please open a new support ticket.

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.

Our next available supporter will start replying to tickets in about 1.44 hours from now. Thank you for your understanding.

Tagged: Bug

This topic contains 9 replies, has 2 voices.

Last updated by Long Nguyen 2 months, 3 weeks ago.

Assisted by: Long Nguyen.

Author	Posts
July 1, 2024 at 6:47 am
lucap-5	Background of the issue: I have created a post category template and the layout looks fine in Spanish, which is the default language, but in other languages the layout is messed up. I used the WPML "+" button to translate the few texts that needed translation with WPML Advanced Editor. Symptoms: The layout is missing several divs in the translated version, causing the layout to be messed up. The code is not the same as the default template. Questions: Why is the layout messed up in the translated version? How can I fix the layout issue in the translated version?
July 1, 2024 at 7:40 am
July 1, 2024 at 8:02 am #15866432
lucap-5	I did not think the issue was going to appear in the test site you gave me access to but it did: hidden link here the layout is wrong, whereas here in the default language is correct: hidden link
July 1, 2024 at 9:31 am #15867296
Long Nguyen Supporter Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	Hi, I'm trying to move the WP Archive Output block into a Group block but the posts are not displayed in the frontend. Can you please re-create the archive layout? Thanks.
July 1, 2024 at 9:55 am #15867524
lucap-5	I have tried to recreate a rough version of the layout. I had to use Gutenberg columns instead of a group. The layout breaks also in this case... hidden link vs hidden link
July 1, 2024 at 8:57 pm #15870489
lucap-5	I have redone the layout once more, only with standard Gutenberg elements, and it seems to work on your staging site: hidden link vs hidden link I tried to replicate it on a "real" staging site, but it does not work... hidden link vs hidden link I suspect there is some "detritus" from an early corrupted translation causing the problem. I would like to get rid of it but I don't know how, since it's an archive page and I cannot access and delete the translation - or at least I don't know how. I tried and deactivate WPML CMS plugin to see whether I could see the translated versions as separate pages, but it does not work... I ditched and redone the Archive template several times and using different names, but the issue is always there...
July 2, 2024 at 2:04 am #15871401
Long Nguyen Supporter Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	Hi, I make it work on your staging site. The block "WordPress Archive Output" should be moved under the "Column" block and above the "WordPress Archive Loop" block. Please check the attached screenshot. Then update the translation layout in English and French language to update the changes. hidden link Looking forward to your reply. Thanks
July 2, 2024 at 6:52 am #15872904
lucap-5	Hi Long, and thank you. In the staging site it seems to work indeed..! I replicated the same layout on the production site (hidden link), and it does not work on the English translation unfortunately...
July 2, 2024 at 7:06 am #15872984
Long Nguyen Supporter Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	On your live site, I ungroup the block items under the "WordPress Archive Loop" block > update the translation layout and clear SG cache. Now you can see the layout in the English language displays the same as in the Spanish language. Looking forward to your reply. Thanks
July 2, 2024 at 7:41 am #15873244
lucap-5	Well, thank you. Now it looks correct, that is great. Only thing that is still wrong is the banner image since it is not translated, even though has been correctly "translated" via the Media Translation plugin... Do you know why this is happening and how to fix it? New threads created by Long Nguyen and linked to this one are listed below: https://wpml.org/forums/topic/the-banner-image-is-not-translated/
July 2, 2024 at 8:10 am #15873465
Long Nguyen Supporter Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	We limit one issue per ticket only so I will split your new issue with image translation into a new ticket for better handling. Thanks.

lucap-5 confirmed that the issue was resolved on 2024-07-02 08:33:25.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.