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

Store Design

Topic summary

A user reports that the account login icon disappears on mobile devices in portrait mode on their Shopify store (empiricalwater.com). The issue only affects portrait orientation on iPhone.

Solution Process:

  • A support member provides CSS code to force the account icon to display on all screen sizes by modifying the base.css file
  • Initial code uses display: block !important to make the hidden icon visible

Refinements:

  • First attempt doesn’t produce visible changes
  • Updated code switches to display: flex !important, which partially resolves the positioning
  • User shares screenshots showing the icon now appears but positioning is incorrect
  • Additional CSS adjustments are provided to resize header icons and bring them closer together for better logo centering

Current Status:

  • Icons are now visible and resized, but still not positioned close enough together
  • Discussion remains ongoing as the user seeks final spacing adjustments to properly center the logo in portrait mode
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
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;
 }
}
1 Like
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;
 }
}
1 Like
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;
 }
}
1 Like
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;
}
}
1 Like
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;
}
}
1 Like