How can I resize my mobile sign-in logo?

Rramon
New Member
11 0 0

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. 

Replies 18 (18)

Rramon
New Member
11 0 0

Screenshot 2024-02-03 at 2.25.40 PM.png

 

 

Asad-Mahmood
Explorer
45 7 7

Hi,

What's your store url ?

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0
Asad-Mahmood
Explorer
45 7 7

Can you share the password so that i can preview the store.

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Asad-Mahmood
Explorer
45 7 7

AsadMahmood_0-1706993914187.png

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0

Is there any option you could tell me the specific code without me telling you the password? I don't want to put it out here on this platform.

Asad-Mahmood
Explorer
45 7 7

I cannot view the class or id used in your logo without viewing your site. In order to resize the logo, you will need to implement some CSS code. You can try this and make sure to write the actual class name

 

Go to you online store -> settings -> custom css 
and paste this code there

 

@media only screen and (max-width: 768px) {
    .class-name {
        width: 150px; /* Adjust the width for mobile screens */
        height: auto; /* Maintain aspect ratio */
    }
}

 

 

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0

That doesn't work. Do you know how to just display the icon when I use the desktop version and display the sign-in on mobile only in the drawer?

Asad-Mahmood
Explorer
45 7 7

Without viewing the site it's not possible for me to do that.

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0

The password is: aifrao

Asad-Mahmood
Explorer
45 7 7

You want to hide the logo in mobile view right ?

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0

Yes! but I want to display it in the drawer, if that is possible

Asad-Mahmood
Explorer
45 7 7

Go TO YOUR ONLINE STORE -> SETTING -> CUSTOM CSS AND PASTE THIS CODE THERE

@media only screen and (max-width: 767px) {
  .header__heading-logo {
    display: none;
  }
}

 

THIS WILL HIDE LOGO ON MOBILE VIEW 

IF YOU WANT TO VIEW LOGO INSIDE THE DRAWER ON MOBILE VIEW I NEED COLLABORATOR ACCESS TO YOUR STORE BECAUSE TO ADD LOGO IN DRAWER I NEED TO EDIT YOUR THEME CODE



If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0

When I add this code, the only thing that disappears is the logo of my brand. 

Asad-Mahmood
Explorer
45 7 7

IF YOU WANT TO VIEW LOGO INSIDE THE DRAWER ON MOBILE VIEW I NEED COLLABORATOR ACCESS TO YOUR STORE BECAUSE TO ADD LOGO IN DRAWER I NEED TO EDIT YOUR THEME CODE

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Rramon
New Member
11 0 0

Yes, I understand that! What I am saying is when I apply the code in the Custom CSS, my brand logo disappears. I want the login logo to disappear. Here is a picture to better explain it to you! Can you modify the code so the login logo disappears instead?

 

Screenshot 2024-02-04 at 2.26.40 PM.png

Asad-Mahmood
Explorer
45 7 7

If you want to hide login logo you need to write this code instead 

@media only screen and (max-width: 767px) {
  .header__icon.header__icon--cart.link.focus-inset {
    display: none !important;
  }
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
Asad-Mahmood
Explorer
45 7 7

If you want to hide login logo you need to write this code innstead

@media only screen and (max-width: 767px) {
  .header__icon.header__icon--cart.link.focus-inset {
    display: none !important;
  }
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com