Hi,

I've tried to get two CSS coders to look at this but neither have been able to fix it so that my logo resizes proportionally - it seems to jump to a much smaller size as you resize the screen. the result is a logo that looks way too small and the design of my website on mobile and tablet is ruined.

The last person who looked at this said there was something that was over riding the code he pasted in.

i don't know what any of this means, but here are some options he tried: (I don't think he was trying to fix it at this point, I think he was just trying a few things to see if it would change the size of the logo, which it didn't hence the conclusion that something is over-riding this)

Thanks.

@media screen and (max-width:700px) {
.main-header .logo-and-menu-container .logo-image .main-logo {
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto !important;
}
}

@media screen and (max-width:420px) {
.main-header .logo-and-menu-container .logo-image .main-logo {
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto !important;
}
}

@media screen and (max-width:300px) {
.main-header .logo-and-menu-container .logo-image .main-logo {
max-width: 100%;
max-height: 100%%;
width: 100%;
height: auto !important;
}

}
@media screen and (max-width:1200px) {
.main-header .logo-and-menu-container .logo-image .main-logo {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
}
}