Skip Navigation

Home › Support › English Support › [Resolved] Flags do not horizontally align when using Twenty Twenty Four - FSE theme

[Resolved] Flags do not horizontally align when using Twenty Twenty Four - FSE theme

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

Problem:
If you're experiencing issues with the flags not aligning horizontally when using the Twenty Twenty Four theme, you might need to apply custom CSS to adjust their alignment.
Solution:
We recommend adding the following CSS code to your site to align the flags properly:

.wpml-language-switcher-block ul.horizontal-list > li {
    display: flex;
    align-items: center;
}
 
.wpml-language-switcher-block .wpml-ls-flag {
    display: block;
    width: 18px;
    height: 12px;
    margin: 0;
    vertical-align: middle;
}
 
.wpml-language-switcher-block li[data-wpml="current-language-item"] .wpml-ls-flag {
    margin-top: 3px;
}

You can add this code via wp-admin → Appearance → Customize page → Additional CSS.
For more details on customizing the language switcher, check out these documentation links:

If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, please open a new support ticket at WPML support forum.

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.

Our next available supporter will start replying to tickets in about 5.98 hours from now. Thank you for your understanding.

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Mateus Getulio 1 week, 5 days ago.

Assisted by: Mateus Getulio.

Author Posts
September 16, 2024 at 11:51 am #16183377

stefanE-16

Background of the issue:
I noticed that the flags do not align when using the default theme Twenty Twenty Four. It looks like I will need to use CSS to adjust.

Symptoms:
Flags do not horizontally align when using Twenty Twenty Four - FSE theme. I expected to see that flags align horizontally to each other. Instead, I got not aligned flags.

Questions:
How can I align the flags horizontally when using the Twenty Twenty Four theme?
Is there a specific CSS code I should use to fix the alignment issue?
September 16, 2024 at 8:27 pm #16185542

Mateus Getulio
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

Can you please try to add the following code to your site to check if it gets the effect you wanted?

.wpml-language-switcher-block ul.horizontal-list > li {
    display: flex;
    align-items: center;
}

.wpml-language-switcher-block .wpml-ls-flag {
    display: block;
    width: 18px;
    height: 12px;
    margin: 0;
    vertical-align: middle;
}

.wpml-language-switcher-block li[data-wpml="current-language-item"] .wpml-ls-flag {
    margin-top: 3px;
}

You can add it to wp-admin → Appearance → Customize page → Additional CSS.

Please check more about language switcher customization:

https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-display-or-hide-the-language-switcher-on-specific-pages/
September 20, 2024 at 10:54 am #16202464

stefanE-16

Thank you the CSS worked nicely!

I noticed when doing an inspect element that there are some alignment issues with the flags. It would be helpful to get alignment in place so that I do not need to use this CSS in the future to align the flags.

Thank you!
stefanE-16 confirmed that the issue was resolved on 2024-09-20 10:54:11.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.