Larger logo doesn't resize to iPhone

If you look at the theme demo – https://inkthemes.com/wptheme/blackbird-technology/
The logo doesn’t resize here either.

What you could do is add to your media query and then display a different logo on the phone, but that requires a bit of coding and I would suggest you make a child theme first.

I already have a child theme as I’ve modified the theme quite a lot already and I was thinking the same, to have two logos.

I’m not sure where to start with the coding though, any ideas?

Thanks.

.header .logo img {
 max-width: 100%;
}

Actually looking back on what Christine said, your theme uses a grid layout; meaning you need to define a new width for the <div> wrapping the logo when you’re using a particular screen size.

Media Queries is the way to go.

Thanks for the info.
I’ve just used this, but it’s not working. Have I missed something out?

@media only screen and (max-device-width: 480px) {

header .logo img {
background: url(https://redwellymedia.com/wp-content/uploads/2013/04/logo-x-small.jpg);
}}

Ignore me – I’ve done it! Used your suggestion within the media query, rather than using two images.

Thanks for your help ??

perfect fix! thank Andrew.

.header .logo img {
max-width: 100%;
}

Worked for me too! Thanks Andrew.

.header .logo img {
max-width: 100%;
}