Make prose header image responsive

[munguti]

prose header image is not responsive when uploaded. Theme developers should make the header responsive like the entire theme

http://www.christiantruthcenter.com/

[RKBlake]

I got Prose to use responsive headers by uploading 4 images for 768, 480, 320, 240 to my Media Library. Then I added the code below to Geneisis Theme Settings -> Header and Footer Scripts under Header.

You'll need to edit the code below to change the url of each image to reflect your domain/url.

<style type="text/css">@media only screen and (max-width: 768px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader768.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:98px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 480px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader480.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:61px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 320px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader320.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:41px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 240px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://yourdomain.com/wp-content/uploads/2015/06/blueheader240.jpg)no-repeat center !important;background-size:contain!important;width:100%!important;height:31px!important; } #title, #title a { background: none !important; } }</style>

Hope that helps.

[Liz]

I have used this code on several sites to get responsive header images. I learned about it after I have designed a Prose site (where I used the responsive header plugin), just haven't prioritized making the change to Sridhar's code.

How to use an inline logo instead of a background image in Genesis

[masajartemis]

thanks all for help

---

Masajartemis – Masaj erotic Bucuresti

[Author]

Posts