Dawn Theme Header Logo Size - Mobile Auto Adjust

Hi guys,

How can i make the logo in the header adjust to whatever mobile screen size it’s displayed on?
Currently if i set 500px on desktop in the logo settings on the theme editor, it changes the mobile as well and makes everything not fit.

The Problem:

How can i have mobile have auto setting to fit the screen its viewed on?

Currently i have to set my logo width to 200px for desktop as it changes both.

Below is the setting at 500px which causes the issue on mobile, but this is the size i would like on desktop.

Hi @lyoung94
To make it responsive, all you need to do is
Go to Theme > Edit Code > base.css file

Around line 2487
you will find this code
.header__heading-logo {
height: auto;
max-width: 500px;
}

Replace this with

.header__heading-logo {
height: auto;
max-width: 100%;
}

Hope to have helped you

Warm Regards
Dawood Mirza

Thank you so much for your help, this was driving me mad

1 Like

No worries

1 Like

Does not work