Making Prose Theme Header Mobile Responsive

[ebeard]

Hello,

I uploaded the recommended 940 pixel wide header to my Prose theme, but when viewed in mobile devices, the header cuts off.

I have researched the topic on this forum, and in the past two things have been recommended to fix this:

1) get a plugin from NicktheGeek "Genesis Responsive Header" but that doesn't work with the current HTML5 themes

2) modify CSS as explained at an article on AlphaBlossom to make the header "inline"

Is there another way? The article about changing the CSS sounded complex and talked about changing other things. I am not a programmer or coder, I just want my header to fit right on mobile screens.

Is there a current plugin or simple CSS fix I can use to make this happen?

http://wealthandleisure.com

[WisdmLabs]

Hello ebeard,
You can use https://wordpress.org/plugins/simple-custom-css/screenshots/ this plugin to add CSS to your site.

You can add following property so that your header image does not cut off in mobile devices.
#header{
background-size: 100% 100%;
}

---

http://wisdmlabs.com/

[ebeard]

Hey, thanks! I installed that plugin and added the code to a custom CSS file, but the header is still chopped off on mobile devices....

[ebeard]

After doing some more searches here, I found lots more threads where people have been seeking an answer to this problem with the Prose header not being mobile responsive. Maybe there is no simple answer. I don't want to hire a coder, as the theme is sold as "mobile responsive" and it is, except for the header. <sigh>

Anyway, if there is no free solution, are there any Studiopress themes that are mobile responsive and will work with a standard 900+ pixel wide header? I have the package that gives me access to all of them, maybe that is the answer if anyone knows of one?

[WisdmLabs]

Hey,
I did check your site. Make following changes to the CSS.

#wrap #header{
background-size: contain !important;
}

@media only screen and (max-width: 720){
#wrap #header{
height: 100px;
}
.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a{
height: 100px;
}
}

@media only screen and (max-width: 420){
#wrap #header{
height: 45px;
}
.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a{
height: 45px;
}
}

---

http://wisdmlabs.com/

[ebeard]

Thanks WisdmLabs, that code does make the header responsive. 🙂

Trying to figure out how to get rid of the whitespace between the header, secondary menu, and top of content on the mobile display...maybe just a matter of adjusting some of the numbers above?

[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.

No editing of functions.php or custom.css, or style.css, and no plugins either...

<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.

[bjay100]

This has been the best solution I have found thus far. However, I too would like less white space between the header image and the menu below. Is there a way to fix this?

[bjay100]

RKBlake...yours would be the best solution. However, the resized header lays over the full size header with the full header peeking out from behind. Is there a way to fix this?

[Author]

Posts