If you look at the theme demo – http://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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
.header .logo img {
max-width: 100%;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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(http://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%;
}
