Skip Navigation

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

Problem:
The client was experiencing an issue where the language switcher flags were displaying much larger than expected on their website. Additionally, after an initial fix, the language switcher disappeared on smartphones and appeared strange in the footer.

Solution:
First, we provided a CSS snippet to correct the size of the flags:

.traveltour-custom-wpml-flag-item img[src$=".svg"] {<br />    width: 9% !important;;<br />}

Then, to address the flags in the footer, we provided another CSS snippet:

.wpml-ls-statics-footer .wpml-ls-item img[src$=".svg"] {<br />    width: 10% !important;margin-right:10px !important;<br />}

We also cleared the site's cache to ensure the changes took effect. For the issue with the language switcher not appearing on mobile devices, we created a separate support ticket to maintain focus on one issue at a time, as per our support policy.

If the solution provided here does not apply to your situation, or if it seems outdated, we recommend checking the related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If the issue persists, please do not hesitate to open a new support ticket with us.

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: 

This topic contains 8 replies, has 2 voices.

Last updated by Mihai Apetrei 1 year ago.

Assisted by: Mihai Apetrei.

Author Posts
April 20, 2024 at 11:03 am #15545950

alainL-22

I am trying to:have a beautiful useful website

Link to a page where the issue can be seen:hidden link

I expected to see:little flags to choose the lanuage

Instead, I got:HUGE FLAGS

FLAGS.JPG
April 20, 2024 at 7:12 pm #15546362

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi there.

I looked over the code of your website and it seems that this language switcher is served directly by the theme that you are using (please check the screenshot I attached).

To overwrite that, you can use this example of CSS code that you can add to Site backend > Appearance > Customizer > Custom CSS:

 .traveltour-custom-wpml-flag-item img[src$=".svg"] {
    width: 9% !important;;
} 

I also attached a screenshot so that you can see how things should look after using the example I shared.

I hope that you will find this information helpful. 🙂

Mihai Apetrei

Screenshot 2024-04-20 at 22.06.36.png
Screenshot 2024-04-20 at 22.07.05.png
April 20, 2024 at 7:46 pm #15546411

alainL-22

Great thanks for this information, I don't know what happened for these flags to become suddenly so big, but you helped me to solve that, thanks a lot 🙂

April 21, 2024 at 9:11 am #15546833

alainL-22

Hello,

So sorry, I've been too fast, on the preview in wordpress, everything is ok, but in real nothing has changed !!
I empied the cache of wordpress, Google, firefox, I even tried on a new device, in incognito windows, desperately, the flags are still crazy big.

The code seems to mention both : the template and wpml.

Thank you for your help

Cordially

Alain

April 21, 2024 at 9:19 pm #15547745

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi Alain and welcome back.

As I mentioned, this issue is not happening due to WPML but I'm happy to take a look in the backend and see if there's a quick fix as custom coding falls out of the purpose of our support policy.

I would like to request temporary access (wp-admin and FTP) to your site to take a better look at the issue. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Our Debugging Procedures

I will be checking various settings in the backend to see if the issue can be resolved. Although I won't be making changes that affect the live site, it is still good practice to backup the site before providing us access. In the event that we do need to debug the site further, I will duplicate the site and work in a separate, local development environment to avoid affecting the live site.

Privacy and Security Policy

We have strict policies regarding privacy and access to your information. Please see:
https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/

**IMPORTANT**

- Please make a backup of the site files and database before providing us access.

- If you do not see the wp-admin/FTP fields this means your post & website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box.

The private box looks like this: hidden link

I will be waiting for your response.

Mihai

April 22, 2024 at 5:16 am #15548019

alainL-22

Hello,

I answered in private, but can't find back my answer, did you receive it ?

Cordially

Alain

April 22, 2024 at 8:29 am #15548657

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi there.

Yes, I was able to see the info that you attached and I connected to the site successfully.

The code was good but you had a good amount of caching that needed to be cleared.

Please check the screenshot below to see what I clicked.

Now, the flags look ok on the front end, too.

Screenshot 2024-04-22 at 11.27.01.png
April 22, 2024 at 1:29 pm #15550813
alainL-22

Dear Mihai,

Thanks a lot for having corrected that successfully. And congratulation for your understanding of French language 🙂 !!

I had cleared all caches, i was thinking the job was done, but no ...

But now the language switcher has disappeared on smartphones (and is strange in the footer.)

I'm sorry, I can't find how to fix that

Cordially

Alain

New threads created by Mihai Apetrei and linked to this one are listed below:

https://wpml.org/forums/topic/split-language-switcher-has-disappeared-on-smartphones/

April 23, 2024 at 11:48 am #15555735

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi Alain.

I created a new line of code so that we can also target the flags in the footer:

.wpml-ls-statics-footer .wpml-ls-item img[src$=".svg"] {
    width: 10% !important;margin-right:10px !important;
}

Now, things look well in the footer, too.

Per our Support Policy, we can handle only one issue per ticket.

Continuing with one issue per ticket helps not only supporters to focus on one issue at once but also enables other users to find solutions to their questions faster.

I created a new ticket for you regarding the new issue where you can't see the language switcher on mobile:
https://wpml.org/forums/topic/split-language-switcher-has-disappeared-on-smartphones/

You will be notified via email when there's an answer to that ticket, too.

Also, can you please mark this current ticket as resolved?

Thank you.

Mihai