Country / language selectors improvement on smaller screen

[melissaperreault]

Describe the current behavior

Mobile

• Noticed on small screen the space between the select is very narrow. They could wrap earlier. Tested on my Android Samsung A70
  • Seems to happen in the editor with shorter select option.
• Related to the above, the dropdown is off screen

From comment #1293 (review)

Describe the expected behavior

• Always have the select and its dropdown visible in view and usable.

Version information (Dawn, browsers and operating systems)

• Dawn Version: 3.0

Possible solution

• Might be somewhat related to this enhancement as well Country/Language selector alignment when stacked on mobile #62

[gregjotau]

@melissaperreault just some words of advice from Baymard:

For country and language selection, only use splash pages if you have significant regional customizations and/or restrictions. Always consider using IP geotargeting instead, but then ensure it’s easy to change the country or language (e.g., on desktop sites by using a flag icon in the upper-right corner). On desktop never display the country or language selector in an overlay dialog.

With regards to the language selection on desktop, it does not follow these recommendations (based on a lot of research.

[melissaperreault]

Thank you @gregjotau for sharing!

This issue surfaces a current experience with the present implementation of the localization selectors that is important to solve. These selectors currently live in the footer to let visitors select their country and local language anytime. I encourage you to open a new issue to share your thoughts further. 🙏

We also have an app that provides language and country recommendations to customers based on their geographic location and browser or device language dependant on merchants market reach and needs.

[bacounts]

On mobile, would stacking the fields make more sense? Ideally, weather stacked or side-by-side, the field(s) width(s) should line-up with the newsletter field visually.