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:
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.
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.
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.
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.
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":
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.
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>
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.
