Problem: The client is trying to align other language flags directly below the active language flag on their website. The flags are misaligned to either the left or right depending on the screen size. Additionally, when switching to the Arabic language, the dropdown flag appears very small.
Solution: First, we recommended adding custom CSS to align the Arabic flag directly under the English flag without any extra spacing. Here is the CSS code we provided:
Next, we suggested performing a test on a staging/testing site by disabling all non-WPML plugins and switching to a default WordPress theme to isolate the issue. We also mentioned that the issue might be due to media queries used by the theme or plugins for styling adjustments on different screen sizes. We provided a link to learn more about media queries:
If the client finds working with custom CSS challenging, we recommended seeking the help of a front-end developer or a WPML contractor, which can be found here:
