Solved

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

empiricalarby
Pathfinder
152 1 27

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

Accepted Solution (1)
devmont-digital
Shopify Partner
96 23 21

This is an 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;
}
}
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

Replies 9 (9)

devmont-digital
Shopify Partner
96 23 21

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

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
empiricalarby
Pathfinder
152 1 27

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

devmont-digital
Shopify Partner
96 23 21

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

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
empiricalarby
Pathfinder
152 1 27

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

image0.jpeg

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

Thanks

devmont-digital
Shopify Partner
96 23 21

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

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
empiricalarby
Pathfinder
152 1 27

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

devmont-digital
Shopify Partner
96 23 21
  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;
}
}
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
empiricalarby
Pathfinder
152 1 27

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

image0.jpeg

devmont-digital
Shopify Partner
96 23 21

This is an 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;
}
}
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io