How to add responsiveness to a custom logo

Hi,

I've created a custom logo using a child theme (folder News-child). In that folder I've duplicated header.php and added a <div> that contains my logo image.

The question is: How can I make that image responsive? I mean...When I view my site on a smartphone the custom logo is the only thing that not adapts to the screen size.

This is the site: http://wp.xeraco.es/

Hi,

You don't use <img> tag (in this case i'ts enough to set CSS rule max-width: 100% to achieve responsive images), so I think you should prepare tablet and mobile version of your logo, then copy tablet and mobile styles to your child themes and replace #logoxeraco background.

You can also use only override.css file with media queries, e.g. for mobile:

Code: Select all

@media (max-width: 580px) {
   #logoxeraco {
      background: your mobile background;
   }
}

I've inserted the logo in header.php as you suggested:

Code: Select all

<div id="logoxeraco">
<img src="/wp-content/themes/News-child/images/logo-wp-xeraco-gran.jpg">
</div>

And in my override.css file I added:

Code: Select all

#logoxeraco {min-height:120px; width:100%;}
#logoxeraco img {max-width: 100%;}


It works now but it doesn't look good because of the aspect ratio of the image. So I will try to use the other options you suggested....