How To Make Your Logo Image Responsive

In this screencast I show you how you can use a single logo image and a bit of Custom CSS (provided below) to create multiple sizes to fit multiple devices. Just tweak the provided CSS code to your specific needs and you've got a simple, yet solid, Responsive Logo solution.

Please Note: In the code examples below you will not only find both the 5th and 6th @media query trigger point code, but you'll find two versions of each (one for HTML5 setups and one for those who have HTML5 disabled).

UPDATE: Since creating this tutorial/screencast we've found that an adjustment to the Header min-height (matching the logo image background-size height value) is now necessary for this to work properly. So note this when implementing the updated @media query CSS code below.

CSS Used In This Screencast

Also Note: If you need help figuring out the changes in logo image height to maintain an accurate aspect ratio you can use THIS TOOL.