Make logo larger on mobile device only

When I’m on a desktop, the logo looks great and is the perfect size. When I go onto my website using a mobile device the logo is very small and pixelated (on a vertical or horizontal screen) and doesn’t look right.

I’m using the “Simplified” header in settings with Full Width and Sticky Header options on.

I have attached a screenshot of the website on my Android mobile device using Chrome.

Screenshot attached.

Attachments:

You must be logged in to view attached files.

Hello,

Firstly, we suggest you to cut your logo image to the exact size of the picture. As you can see from the screenshot, it has a lot of white space on each size that makes your logo too large and pixelated on mobile devices https://gyazo.com/ee7e2bfec2adae928ecfdfda0628f14f
Also, try to add the following code snippet to the Custom CSS for mobile devices in Theme Settings

.main-header .site-logo {
    width: 70%!important;
}

Regards

The first suggestion worked perfectly! Thank you so much for your help on this; I didn’t know that the logo had so much open space on it. Have a good day!

Great, you are welcome!

[Author]

Posts