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

Store Design
1

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

2

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;
 }
}
3

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

4

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;
 }
}
5

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

image0.jpeg
image0.jpeg1170×721 47.4 KB

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

Thanks

6

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;
 }
}
7

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.

image0.jpeg
image0.jpeg1170×696 48.1 KB

8
  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;
}
}
9

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

image0.jpeg
image0.jpeg1170×695 50.5 KB

10
  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;
}
}