Best Currency convertor goes under Header Icons on Mobile Version

[Kylara]

Hi!

Can someone help me fix this? So the flag doesn't go under the icon. I can move the Logo to left if needed.

[Made4uo-Ribe]

Hi @Kylara 

I managed to keep the currency converter in line, but on smaller screens, the logo will disappear if we maintain this layout.

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (max-width: 749px) and (min-width: 340px) {
    .doubly-wrapper {
        position: relative;
        margin-top: 0;
        padding-top: 7px;
        overflow: hidden;
        padding-left: 25px;
    }
    .header__icons {
        display: flex;
        flex-wrap: nowrap;
        padding-right: 0;
    }
    .header {
    display: grid;
    grid-template-columns: auto 1fr auto;
}
}

And Save. 

Result:

For the more smaller screen. (340px width)

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Kylara]

Hi!

Thank you for the response. 

The code sadly didn't work though. Atleast when I inspect it in mobile version it still goes under the icons. 

I now moved the logo to the left. Maybe you can somehow move the converter on the right side of the cart icon, now that there is more room.