Skip Navigation

Home › Support › English Support › [Waiting for user feedback] Overlapping translation icons for Portuguese and English

[Waiting for user feedback] Overlapping translation icons for Portuguese and English

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.

Sun Mon Tue Wed Thu Fri Sat
12:00 – 20:00 12:00 – 20:00 12:00 – 20:00 12:00 – 20:00 12:00 – 20:00 - -
- - - - - - -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 1 reply, has 0 voices.

Last updated by Noman 1 week, 1 day ago.

Assisted by: Noman.

Author Posts
December 3, 2024 at 10:45 am #16470983

fraserP

Background of the issue:
I am trying to use the site on mobile, and at the footer, the English and Portuguese translation icons get overlapped on the text beside them. Link to a page where the issue can be seen: hidden link

Symptoms:
The words 'English' and 'Portuguese' get truncated because the English and Brazil flag icons overlap with the texts.

Questions:
Can this UI issue be resolved?
December 3, 2024 at 12:24 pm #16471655

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. I’ve noticed that the issue is arising due to the theme CSS.

1. Either remove the below CSS rules:

.wpml-ls-flag {
    display: inline-block;
    max-width: none;
    margin-right: 8px;
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

From this file: hidden link

2. Or add the below CSS in the custom CSS section of your theme to override it:

.wpml-ls-item-legacy-list-horizontal .wpml-ls-flag {
    position: relative;
    left: 0;
    transition: none;
    top: 1px;
    transform: none;
}

And it will look as in the attached screenshot.

Please let me know if this resolves the issue or if you need further assistance with this issue.

Thank you

lang switcher style.png