Wix Multilingual: Troubleshooting Alignment Issues on Your Multilingual Site

4 min read
The alignment of your elements on your multilingual site changes between your languages versions. This is because text translations in different languages may be of different lengths, and the layout of elements is not automatically optimized or responsive.
When building your site, it's important to pay attention to the design and placement of elements in your main language, as this affects alignment across all language versions. If you find that the translated version of your content is causing design issues, consider rephrasing or synthesizing content.
As you work on your site, continue to check how it looks across your live language versions, and fix any alignment issues as they arise.

In this article, learn more about:

Moving elements in a secondary language

When you reposition elements in a secondary language, this affects the position of that element in all languages. This means that moving an element in the Editor of a secondary language moves the same element in all other language versions.
When moving an element, a pop-up appears to remind you that this position change will be applied to all language versions of your site. You have the option to continue with this change, or to undo it. 
You can always restore a previous version of your site if you decide you are not happy with the repositioning of your elements. Languages you added, deleted, made visible, or hid are not affected. Changes made to content, design, and layout revert to the previous version. 

Text box alignment issues

Text translations may be of different lengths in different languages. This may cause alignment issues between language versions. There are many ways to tackle these issues.

Learn more about our recommendations:

  • Text box size: Make your text box large enough in the main language to house its translation in the secondary language. This will prevent the text from being cut off.
  • Font: Some fonts may not read well in certain languages. Change the font in language versions where this is an issue. You can also increase or decrease the font and text size per language to improve alignment.
  • Line and character spacing: Make sure that the line spacing and character spacing are the same across all languages. Learn how 
  • Text themes: Ensure that the text theme applied to text in the secondary language matches that of the main language. Learn more
  • Overlapping elements: Don't overlap text boxes with buttons or other elements. This may cause alignment issues in cases where the translated text is longer than the main language. We recommend placing buttons and other elements outside the text box.
  • Grouping text and elements: Grouping elements helps to avoid overlapping and alignment issues across languages. Learn how to group elements here.
Consider using repeaters to house your content. Repeaters make it easy to organize and structure your content, as they have the same design and layout. This is a great way to ensure your content is arranged neatly and predictably across all language versions.

Background image position and scale

When translating your site, you may need to adjust your background image to match its scale and positioning in the main language.

To adjust your background image:

  1. Click the Switch Language panel at the top of the Editor.
  2. Select the secondary language you want to work on.
  3. Click the Background icon  on the left.
  4. Click Settings.
  5. Depending on what you want to change, do the following:
    • Adjust image scale: Click the drop-down menu under How's the image scaled? and select an option.
    • Change image position: Select a position on the grid under Where's the image positioned?
If the problem is with general, stand-alone images, make sure that you are uploading the different language versions of the images in the same resolution (pixels).

Additional alignment recommendations

  • Check that the X and Y values of the elements you're trying to align are the same in all languages. These values are the horizontal and vertical positions respectively relative to the Editor. You can see these values on the Editor Toolbar. If the elements are still not aligned, add spaces to the text box using Enter on your keyboard.
  • Alignment issues that are present on a mobile device should be adjusted from the desktop editor and not the mobile editor.

Did this help?