How can I resize my mobile sign-in icon?

Shopify Discussion

Topic summary

A user seeks help resizing the sign-in/account icon on their mobile Shopify store to match other icons they’ve already adjusted. An image was provided showing the current appearance.

Initial Solution Attempt:

  • First response recommended adding a setting via theme architecture documentation
  • Provided CSS code targeting .header__heading-logo with max-width: 125px
  • This solution incorrectly affected the brand logo instead of the account icon

Corrected Solution:

  • After clarification, updated CSS code was provided targeting .header__icon--account with max-width: 15px within a media query for screens up to 749px
  • This specifically addresses the sign-in icon size on mobile devices

Status: The conversation appears resolved with the corrected CSS snippet, though final confirmation of success is not shown. The solution involves modifying the theme’s CSS file with mobile-specific styling.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I want to resize my sign-in logo on my mobile Shopify store, as I did with the other icons. How can I do that?

Here is a picture of how it looks at the moment.

Screenshot 2024-02-03 at 2.25.40 PM.png
Screenshot 2024-02-03 at 2.25.40 PM.png754×252 86.8 KB

My URL is: https://f6fb1d.myshopify.com/?_ab=0&_fd=0&_sc=1
The password is: aifrao

2

The recommended approach is to add a setting within your theme’s settings. See here: https://shopify.dev/docs/themes/architecture/settings#dynamic-sources

Although, a quick fix might be to modify your themes CSS file to include:

@media screen and (max-width: 749px) {
.header__heading-logo {
   max-width: 125px !important;
   }
}

this will adjust the logo’s width to be smaller. You can play around with the number to dial in what looks good.

3

Hi, thank you. Unfortunately, this code lets my brand logo disappear instead of the login logo. Could you please modify the code and resend it?

4

I’m sorry, i read your question wrong.

Try this code to adjust the size of your sign-in icon.

@media screen and (max-width: 749px) {
.header__icon--account {
   max-width: 15px !important;
   }
}