Alignment of svg icons in the header gone wrong

[nikihuga]

i have changed the svg of the top right icons from the asset files, looks fine in desktop version but the alignment gone wrong in mobile, how can i fix this?

[sthr]

Hi,

If you let us know the theme you’re using and your store URL, people will be able to help you faster

[The_ScriptFlow]

Hey @nikihuga,

Could you please share your store URL and password [if applicable] so that I can take a look and provide you solution code.

Looking forward to hearing back from you.

Thanks

[nikihuga]

my url: hugahome.shop
theme is Dawn 15.3.0
no pw, thanks

[nikihuga]

my url: hugahome.shop
theme is Dawn 15.3.0
no pw

cheers

[nikihuga]

hi, also in mobile version when i toggle my fingers the page zoom out to the left side with the announcement bar running on the right which looks very odd, is there any way to fix?

[The_ScriptFlow]

For the first fix I can able to provide you solution code.
But for the next fix requires to have a Store access. Would you like to share the 4 digits collab code in the p/m.
Thanks

[The_ScriptFlow]

In order to fix the issue with the position of the header icons you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit Code >> base.css
In the end of base.css paste the following code.

@media only screen and (max-width: 767px) {
.header__icons {
     transform: translate(17px, 12px);
}
}

Results:

If you have any other Question the let me know.
Thanks

[nikihuga]

@The_ScriptFlow

@media only screen and (max-width: 767px) {
.header__icons {
     transform: translate(17px, 12px);
}
}

thanks The_ScriptFlow!

now on website version after customer account logged in, the account icon dropped out of line, how can i fix please?

[The_ScriptFlow]

Would you mind to share the collab code so that I can take a look to all issues at once.

[tim_1]

The problem happens because your SVG images are bigger then the actual picture inside.

I’d change the code of those SVG icons – find viewBox="0 0 XX YY"
and make it viewBox="0 0 32 32"

Then undo the previous fix and add instead:

header .header__icon .svg-wrapper {
  width: 24px;
  height: 24px;
}

Can try bigger width and height if you like.

[nikihuga]

thanks tim_1 it works!

also in mobile version when i toggle my fingers the page zoom out to the left side with the announcement bar running on the right which looks very odd, is there any way to fix?

[tim_1]

Try this code in “Theme Settings” => “Custom CSS”

.announcement-bar {
    overflow:hidden;    
}

[nikihuga]

thanks, the problem is the whole page is zoomed out when you toggle fingers on mobile version like below. how can i fix this please?

[tim_1]

I expect the code above to take care of this problem.

[nikihuga]

@tim_1

.announcement-bar {
    overflow:hidden;    
}

awesome fix thanks Tim_1!