[Resolved] Width of flag switcher only not display correctly

Hello, welcome to the WPML support Forum!

While you are waiting for one of my colleagues to take this ticket and work on it, let me provide you with first debugging steps or if I can perhaps help with the issue quickly.

There is a CSS in your theme (or Elementor) that conflicts with that of the language switcher. This will require some minor CSS modifications to fix.

I created a small snippet that can serve as a starting point. You can add it in Appearance > Settings > Additional CSS and then make the necessary modifications from it:

.wpml-elementor-ls {
    max-width: 40px;
}

.wpml-elementor-ls .wpml-ls-item-toggle {
    padding: 5px;
}

Please let us know if it worked for you.

Hi there.

Please try this CSS and see if it does what you want (remove the old one and try this new one):

.wpml-ls-sub-menu .wpml-ls-item {
    max-width: 40px !important;
}

span.wpml-ls-display {
    display: none !important;
}

Also, please note that custom CSS is considered custom work so usually we do our best to guide our customers on the right path but custom work falls out of the purpose of our Support Policy.

I hope that the example code that I shared helps. 🙂

Mihai

Hi there.

There are some things conflicting or overwriting the code on your site.

If you disable the current theme and switch it to a default WordPress theme (like twenty-fifteen) and leave just the WPML plugin active + the 2 Elementor plugins, things would probably not need extra custom CSS code, but in this situation, we are using custom code to overwrite things that are already overriding the normal styling.

From my understanding, there is some text that was showing up on mobile (the language names) and that is not showing up on mobile anymore. That is also a custom implementation and someone created some custom CSS rules or conditions for them probably with custom code to have the language names not show up on desktop and only on mobile. So your site already has some kind of custom implementation or custom rules.

In our latest code version, we are the ones who set to hide the language names using this line:

span.wpml-ls-display {
    display: none !important;
}

This line was creating extra spacing in the desktop version.

If you want us to show that line on mobile, you can use CSS media queries to control when you want to hide the language names (they were hidden for desktop from what I have seen).

So you could use something like this for that part (remove the older part that I mentioned containing this exact line):

@media screen and (min-device-width: 641px) {

span.wpml-ls-display {
    display: none !important;
}

}

This way, language names will display only on mobile.

Again, this falls out of our Support Policy, so, in case you need more refinement, please read about CSS media queries and see if you can understand how things work.

If you never worked with code, it might be a bit harder, and in that situation, we recommend that you hire a WPML contractor (https://wpml.org/contractors) or a front-end developer.

I hope that you will find this information helpful.

Mihai