Log into Account button doesn't show up on mobile on portrait mode

[empiricalarby]

https://empiricalwater.com/

On iPhone at least, the account icon doesn't show up on portrait mode, only on landscape. I need that button to always be present regardless of platform, orientation, screen size, etc.

How to enable that?

Thanks

[devmont-digital]

Hello @empiricalarby,

If you want to display the account button on all screens, please follow these steps:

1. Navigate to Online Store -> Themes -> Edit Code.
2. Find base.css and scroll to the bottom of the page.
3. Paste the code provided below.

@media(max-width:749){
.header__icon--account.small-hide{
   display:block !important;
 }
}

[empiricalarby]

Thanks, but I didn't notice any changes after applying the code

[devmont-digital]

Try this Code

1. Navigate to Online Store -> Themes -> Edit Code.
2. Find base.css and scroll to the bottom of the page.
3. Paste the code provided below.

@media(max-width:749px){
.header__icon--account.small-hide{
   display:block !important;
 }
}

[empiricalarby]

A step in the right direction, here's the remaining issue though.

As you can see the positioning is not quite right. I appreciate your time.

Thanks

[devmont-digital]

Try this Code

1. Navigate to Online Store -> Themes -> Edit Code.
2. Find base.css and scroll to the bottom of the page.
3. Paste the code provided below.
4. And remove the old cold

@media(max-width:749px){
.header__icon--account.small-hide{
   display:flex !important;
 }
}

[empiricalarby]

Thanks so much, it's almost perfect. I just need one more piece of code to adjust the distance between the three icons to the right, in portrait mode specifically. I need the icons to be closer together so that the logo will be centered in the header.

[devmont-digital]

1. Navigate to Online Store -> Themes -> Edit Code.
2. Find base.css and scroll to the bottom of the page.
3. Paste the code provided below.
4. Don't remove the old code.

@media(max-width:600px){
.header__icon .icon{
    height: 1.7rem;
    width: 1.7rem;
}
.header__icon--cart .icon{
    height: 3.4rem;
    width: 3.4rem;
}
}

[empiricalarby]

Hmm, seems like the icons got a tiny bit smaller, but not closer together. Is it possible to make them closer together?

[devmont-digital · Accepted solution]

1. Navigate to Online Store -> Themes -> Edit Code.
2. Find base.css and scroll to the bottom of the page.
3. Paste the code provided below.
4. Don't remove the old code.

@media(max-width:600px){
.header__icon, .header__icon--cart .icon {
    height: 3.4rem;
    width: 3.4rem;
}
}