Genesis-Dynamik-responsive header image issue

[Tracey]

I've been struggling to find a clean solution. I understand that the logo image is 'background' and therefore not responsive--like images added to posts, etc...--so I've been trying out different suggestions that I'm finding online. None of them are working!

1. I've tried the "Genesis Responsive Header" plugin --> It didn't work.

2. I've tried the steps offered in this video on Vimeo, modifying for Genesis based on what was suggested on the Catalyst Theme forum --> It didn't work.

3. I put the following in the CSS Custom:

@media only screen and (max-width: 320px) {
background: url(images/logo-320px.png) no-repeat!important;
height: 110px!important;
width: 320px!important;
}

@media only screen and (max-width: 240px) {
background: url(images/logo-207px.png) no-repeat!important;
height: 193px!important;
width: 207px!important;
}

--> It didn't work.

4. I put the following in Dynamik-Design Options-Responsive, for max-width:479px (the smallest option)

.header-image .site-title > a {
background: url(images/logo-320px.png) no-repeat left;
float: left;
min-height: 60px;
width: 100%;
}

This last try was the closest I came to a solution - the smaller image appeared. But, unfortunately, the larger image is still there too. How do I get rid of the larger image when the smaller image kicks in?

Or, is there a better solution that I haven't even tried yet?

http://nevertoolatetowrite.com/

[Tracey]

I kept trying, and found the solution!! For anyone who finds this in their search for a solution, here is the video that helped me:

http://dynamikdocs.cobaltapps.com/article/146-how-to-make-your-logo-image-responsive

Perfect and oh, so easy!!! 🙂

[Author]

Posts