Design changes don't affect translated pages, why?

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

Problem:
The client is experiencing issues with image alignment on a bilingual website. The French translation, which is longer than the English version, causes the image in the adjacent column to have undesirable top and bottom margins. The client is unsure if changes made in the translated text should appear on the live site and is also confused about the appearance of a cog icon instead of a pencil icon after translation.

Solution:
We recommend setting the image height to "auto" to accommodate the varying text lengths in different languages. This can be done by adding the following CSS rule:

.elementor-53293 .elementor-element.elementor-element-2ba17c9 img {<br />    height: auto!important;<br />}

This CSS rule should be added at Customizer > Additional CSS. It's important to note that this is not a WPML issue, as WPML will use the same image in both languages unless an alternative image is uploaded at WPML > Media Translation.

Take note, that when translating the content with the WPML Translation Editor then it will use the same settings in both language. In this case, the Elementor Page Builder Widgets all had the same setting, only the amount of text was different.

If this solution doesn't look relevant, 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.

Tagged: Custom Work, Not WPML issue

This topic contains 31 replies, has 2 voices.

Last updated by Andreas W. 4 months, 3 weeks ago.

Assisted by: Andreas W..

Author	Posts
November 17, 2023 at 2:55 pm #14864143
ronaldT-5	Tell us what you are trying to do? Added column background image behind foreground image. Is there any documentation that you are following? no Is there a similar example that we can see? hidden link What is the link to your site? hidden link
November 17, 2023 at 2:57 pm #14864177
ronaldT-5	And here's the translated page:
November 17, 2023 at 3:04 pm #14864407
ronaldT-5	Because the translated text, in this case French, is longer, the matching image isn't big enough and renders undesirable top and bottom margins. How do others building bilingual websites handle this?
November 17, 2023 at 11:31 pm #14866941
Andreas W. Supporter Languages: English (English ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, The links that you mention as examples show 404 Errors. The website is using different domains per language, and I was checking but I can not find this image. I see inside the debug information that you do have a staging site. Would you mind providing me with admin access so that I can take a closer look at the issue? I would like to offer to have a closer look at the problem and request temporary access (wp-admin and FTP) to the website to investigate this issue further. You can find the required fields below the comment section when you log in to leave the next reply. The information you provide is private, which means only you and I can see and access it. IMPORTANT Please be sure to make a backup copy of the website and database before allowing us access. If you can't see the wp-admin / FTP fields, your post and website credentials are set as PUBLIC. DO NOT publish the data unless you see the required wp-admin / FTP fields. The private response form looks like this: hidden link Next time you reply, click "I still need assistance." Video: hidden link Please note that we are obliged to request this information individually on each ticket. We may not access any access information not specifically submitted on this ticket in the private response form. Best regards Andreas
November 18, 2023 at 1:10 am #14867081
ronaldT-5	I'm currently making a full backup. Sorry, I was busy eating dinner earlier. Hope it is okay with you. Backup finished.
November 18, 2023 at 3:28 am #14867147
Andreas W. Supporter Languages: English (English ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, Thank you for providing access, but sadly the password seems not to match. Please verify the information and also pass me a link or title for the content on which I can see the issue. If necessary you should be able to edit the private information that you posted earlier. Once access is granted please drop me a message here. Best regards Andreas
November 18, 2023 at 6:42 am #14867177
ronaldT-5	The English content is on the home page: hidden link The translated content is on the home page: hidden link The French text is often longer, therefore screws up the design, mostly adding top and bottom margins to the image on the adjacent column. I have since altered the translation for that page with shorter translation texts to help alleviate this problem. No sure if it is normal for the changes I make in the translated text to show up in the live site. And sometimes I get a cog icon once the translation is completed instead of an pencil icon.
November 18, 2023 at 6:48 am #14867179
ronaldT-5	Also, do you know how to identify the page builder number for each page? There might be a conflict between my old page building (VC) packages and the now Elementor packages.
November 18, 2023 at 8:52 pm #14868697
Andreas W. Supporter Languages: English (English ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, This behavior is expected, as I see the same image in both languages has the same dimensions, only that the section is bigger, due to the difference in the amount of text. You can solve this issue by using the following CSS to set the image height for this specific image to "auto": .elementor-53293 .elementor-element.elementor-element-2ba17c9 img { height: auto!important; } I have added this rule now at Customizer > Additional CSS. Take kindly note, that this is not really a WPML issue, as it is expected behavior. WPML will always use the same image in both languages unless you upload an alternative image at WPML > Media Translation. Best regards Andreas
November 19, 2023 at 3:31 pm #14871119
ronaldT-5	Thank you so much for the code. But, I have yet to find your code. Elementor doesn't have a Customizer, the way WPBakery does. And Elementor->Site Settings->Custom CSS is empty. So, I'm a bit lost here. <sorry>
November 19, 2023 at 11:45 pm #14872205
ronaldT-5	Never mind, I have found the location of your code. Thanks again. It's just that Elementor has a better to input custom code.
November 20, 2023 at 6:48 pm #14880427
ronaldT-5	After checking on both the French and English pages, the code makes no difference. French always tend to have lesser margin on the text side, or sometimes on the image column.
November 20, 2023 at 8:31 pm #14880745
ronaldT-5	Actually, it does, but it is not 100% reliable. I'm trying to figure why. It might be an incompatibility with another plugin. Who knows?
November 21, 2023 at 2:01 am #14881521
ronaldT-5	I've since altered the code a bit and placed it in Site->Custom CSS window, but it makes no difference: .AutoHeight img { height: inherit!important; } And added that class to every relevant full-height images on the page.
November 21, 2023 at 3:14 pm #14888439
Andreas W. Supporter Languages: English (English ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, The gap on the image is gone since I adjusted the image's height property to "auto". See screenshot. Please clarify exactly what you expect to see and where. Best regards Andreas

ronaldT-5 confirmed that the issue was resolved on 2023-12-12 00:15:48.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.