Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making Prose Theme Header Mobile Responsive
Tagged: prose header mobile responsive
- This topic has 8 replies, 4 voices, and was last updated 9 years, 5 months ago by
bjay100.
-
AuthorPosts
-
March 17, 2015 at 9:20 am #144741
ebeard
MemberHello,
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.comMarch 17, 2015 at 10:51 am #144747WisdmLabs
MemberHello 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%;
}
March 17, 2015 at 12:12 pm #144751ebeard
MemberHey, thanks! I installed that plugin and added the code to a custom CSS file, but the header is still chopped off on mobile devices....
March 17, 2015 at 6:49 pm #144792ebeard
MemberAfter 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?
March 18, 2015 at 12:29 am #144804WisdmLabs
MemberHey,
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;
}
}
March 18, 2015 at 5:38 am #144819ebeard
MemberThanks 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?
June 18, 2015 at 3:39 pm #156710RKBlake
MemberI 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.
September 14, 2015 at 11:56 pm #165535bjay100
MemberThis 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?
September 14, 2015 at 11:57 pm #165536bjay100
MemberRKBlake...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?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.