Flags Do Not Align with Language Name

  • Resolved generosus

    (@generosus)


    2 years, 8 months ago

    Good Day!

    Upon switching our flags from 24px to 16px, I noticed the flags do not align (vertically) with the language name.

    Details (16px flags with language name, native configuration): CLICK HERE

    Details (24px flags with language name, native configuration): CLICK HERE

    I researched this issue and concluded that, when using a language dropdown menu, your CSS code for the “Flags with language name” setting needs to be updated to show both the flag and its respective language vertically aligned (middle alignment) in the dropdown menu field. Also, the space between the flag and the language needs to be increased a bit.

    In short, this is what worked for me: (I added the “style” code noted below next to each flag listed in the Widget code box for advanced users )

    <img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/en-us.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2em" alt="English" />

    Result (after applying the above to our selected flags): CLICK HERE

    The above, however, partially fixes the issue. The language name CSS (vertical alignment) also needs to be changed to “middle.” I did not know how to do this.

    It would be great if you can fix this at your next convenient plugin revision.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author edo888

    (@edo888)

    Hi,

    Please post your website address and I’ll check it for you.

    Thanks! ??

    Thread Starter generosus

    (@generosus)

    Hi @edo888,

    I found a way to vertically-align the flags and language names inside the dropdown. Given the above screenshots (languages), I simply added the “style” CSS code noted below to both the flags and languages (inside the Widget code for advanced users).

    Result (looks nice): CLICK HERE

    Note: We’re using the plugin, Shortcode in Menus, to create the language dropdown.

    If possible, please incorporate this fix into your plugin.

    Thank you!

    <img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/en-us.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2rem;opacity:.7" alt="English" /> <span style="vertical-align:middle">English</span></a> <a href="#" onclick="doGTranslate('en|es');return false;" title="Espa?ol" class="glink nturl notranslate"><img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/es.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2rem;opacity:.7" alt="Espa?ol" /> <span style="vertical-align:middle">Espa?ol</span></a> <a href="#" onclick="doGTranslate('en|fr');return false;" title="Fran?ais" class="glink nturl notranslate"><img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/fr.svg" height="16" width="16" style="vertical-align:middle;margin-right.2rem;opacity:.7" alt="Fran?ais" /> <span style="vertical-align:middle">Fran?ais</span></a> <a href="#" onclick="doGTranslate('en|de');return false;" title="Deutsch" class="glink nturl notranslate"><img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/de.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2rem;opacity:.7" alt="Deutsch" /> <span style="vertical-align:middle">Deutsch</span></a> <a href="#" onclick="doGTranslate('en|pt');return false;" title="Português" class="glink nturl notranslate"><img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/pt-br.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2rem;opacity:.7" alt="Português" /> <span style="vertical-align:middle">Português</span></a> <a href="#" onclick="doGTranslate('en|zh-CN');return false;" title="简体中文" class="glink nturl notranslate"><img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/zh-CN.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2rem;opacity:.7" alt="简体中文" /> <span style="vertical-align:middle">简体中文</span></a> <a href="#" onclick="doGTranslate('en|ja');return false;" title="日本語" class="glink nturl notranslate"><img src="//www.mywebsite.com/wp-content/plugins/gtranslate/flags/svg/ja.svg" height="16" width="16" style="vertical-align:middle;margin-right:.2rem;opacity:.7" alt="日本語" /> <span style="vertical-align:middle">日本語</span></a>

    Thread Starter generosus

    (@generosus)

    Hi @edo888,

    Since Lightshot (screenshot viewer) has become unreliable lately, below please find the image depicting the result referenced above. Nice!

    Again, fix appreciated ??

    Thank you!

    Plugin Author edo888

    (@edo888)

    Hi,

    It is really a website specific issue, so it is not going into the plugin. But you can add the CSS rules you have applied into your website theme and it will be fine.

    Thanks! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Flags Do Not Align with Language Name’ is closed to new replies.