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.
Problem: The client is trying to display only the non-current languages in the top WPML language switcher using the Elementor WPML Language Switcher widget. Solution: We recommend the following steps to achieve this: 1. Ensure you back up your site for safety reasons. 2. Edit the Elementor header template and remove the WPML Language Switcher widget. 3. Add a "Shortcode" widget and insert the following shortcode:
[wpml_language_selector_widget]
4. Navigate to WPML >> Languages >> Custom Language Switchers, select the "Enable" checkbox, and click the "Customize" button. 5. In the "Language switcher style" dropdown, select "Vertical list", uncheck the "Current language" checkbox, and click the Save button. This will hide the current language from the language switcher.
