[Resolved] Page created with Layouts not looking the same in different languages (WPML)

[Author]

Posts

[Roki]

Can you please log into WP admin and have a look? I expected this would work out of the box since I am using plugins from the same company. What would be the best/right way to resolve this issue?

Original pages created with Layouts (English)
- hidden link
- hidden link
Translated pages using WPML and iCanLocalize (Chinese)
- hidden link
- hidden link

The staging2 website I am giving you access was created just for this purpose, feel free to do whatever you want on it, it will be deleted after we resolve the issue. Type in first the staging password (found in the FTP credentials, then the WP admin password). I also included all files and the data base if you want to test it locally (google drive download link in the Duplicator field)

Thank you in advance

[Christian Cox]

Sorry, I'm not able to get past the basic HTML auth. I wasn't clear what to use for the username and password here. I tried staging password / admin password but that didn't work. I will activate private reply fields here.

[Christian Cox]

This include generates that blue area, if I read your theme files correctly:

include(locate_template('inc/page_thumb_head3.php'));

Inside that file, I can see that the blue area is dependent upon whether or not this post has a featured image. I can see that the English version of this post is configured NOT to duplicate the featured image to translations, so my guess is that there is no featured image assigned to the Chinese version, and your page_thumb_head3.php conditional isn't true.

[Roki]

Hi Christian

The featured image is not the problem (I havent duplicated it yet).

I was refering to the design created with layouts between the featured image and the submission form..the boxes of text,images,sliders,etc. Looks like the CSS I wrote in layouts for the English version was not transfered to the chinese. Can this be? How to fix that? I expected this to work out of the box since both WPML and Toolset are from the same company.

[Christian Cox]

Ah, okay I did not scroll down the page far enough to see the differences you are describing. It's unusual that the Content Layout did not get applied to the translation, because it seems to be set up appropriately. I just went to the page editor for this page:
/wp-admin/post.php?post=1708&action=edit&lang=zh-hans

I clicked the "Update" button, and now the Content Layout seems to be applied correctly. Can you confirm? Are there any other pages with a similar problem that we should investigate?

[Roki]

Hi Christian

I just did what you suggested and its half way there, the following 2 things still need assistance:
- youtube video is not full width
- the image slider is missing
(have a look at the screenshot and compare it to the english version -> hidden link )

We need to go live with chinese, please help us fix this asap.

[Christian Cox]

- youtube video is not full width
The CSS for this section is not translated correctly, and it is breaking your video styles. See the attached screenshot iframe-width.png. If you have questions about this type of translation issue, the WPML forum is the best place to get assistance.

- the image slider is missing
This is another CSS translation issue that needs to be addressed in the WPML forums. One "greater-than" character is being replaced incorrectly using the HTML equivalent:

>

See the attached screenshots carousel-current.png and carousel-fixed.png. One quick way to resolve this is to place the correct CSS code in Layouts CSS and remove it from the Layout content.