I have the same issue as others with the header text being cut off if it runs into a second line on mobile, unless the header size is 300 px or higher. I resolved this issue by using your previously listed solution for text size reducing on Mobile.
@media only screen and (max-width: 690px) { #page-header-bg .span_6 h1, .single.single-post .section-title h1 { font-size: 3.5vw!important; line-height: 2.5vh!important; } }
@media only screen and (max-width: 1000px) and (min-width: 690px ){ #page-header-bg .span_6 h1, .single.single-post .section-title h1 { font-size: 3.5vw!important; line-height: 4.5vh!important; } }
However, it doesn't really resolve the issue well. As you will see from the related URL, the header text is often much smaller than necessary, failing to use the extra space to it's right or the full header height available. In addition, the text is always at the very top of the header field instead of centered vertically, which just looks silly. And for a header, really I'd prefer the text to not reduce in size but maintain a nice large size.
So is there a way for the header size to become responsive instead of the text? For the header to increase in size at tablet/mobile screen sizes to fit the text? I don't mind if at desktop resolutions I can't specify a header height. If it needs to be responsive at all screen sizes and just expand or contract to fit the necessary text height (along with padding on the top and bottom) I am perfectly okay with that. And is there a way to keep that text vertically centered?
Thank you! I appreciate how fast you always are with resolving my questions!
I\'m not sure why this was closed, but I have yet to receive a reply. I am attaching an image to illustrate what my issue is with the blog header text on mobile (the CURRENTLY image), versus what I would like (the DESIRED images).
Personally I don\'t really care which of the two solutions is provided. 1. The header text is only increased to fill the maximum width and is centered vertically within the existing header height. 2. The header height becomes responsive itself and is taller on mobile to fit a larger text size. I think option 2 looks better, but I also realize having a responsive header height is probably harder to code than just a responsive blog h1 field.
Please update the theme as we have revised header logic. Update the Theme to 7.0.2 which has many Bug Fixes and New Features , See changelog : http://themenectar.com/changelogs/salient.html .
I updated the theme and plugin successfully. The text is now centered vertically.
However, whether I assign a pixel value for the header height (right now it\'s 225) or leave it blank, it is now the same height on mobile as it is for desktop. You can see my original link for yourself that when on a desktop, the amount of header space above and below the text is reasonable. However, the header size is gigantic with blank space on mobile.
Now, if the header size must remain that large, I am perfectly fine with that. But if so, then the text needs to be larger so that it at least stretches to fill the entire line width (which it still doesn\'t do) or maybe even span into 2 lines of text with a larger font size, as it does on desktop for longer header titles.
The min-height: 250px is not in my custom CSS. I double checked, even doing a text search for \"250\". With the theme update now, I actually removed the CSS for responsive header text that I mentioned in the original post and now the text is actually larger, to my satisfaction.
I also experimented on a blog post by entering a header height and then again by having that field blank. With the new theme update it seems that the header height field only applies to desktop displays. It ignores the pixel size when on tablet or mobile... which is a good thing I guess? However, no where can I find in the theme\'s styles.css or my custom css the min-height entry. Here is a copy of the custom CSS entered into the Salient CSS box just so you can see for yourself. Where is it pulling that min-height? It has that same CSS min-height for each blog post when I do a code inspection, despite each post having a different header height configured as an experiment (e.g. 175, 225, 250, etc)
.homepage-trans-textbg {
color: #111111;
background-color: rgba(255, 255, 255, 0.6);
}
.dark-trans-textbg {
background-color: rgba(0, 0, 0, 0.2);
}
.imgborder {
border: 2px solid #cccccc;
}
.bg-blue {
background-color: #2c58c6;
padding: 25px;
color: #ffffff;
}
.bg-mint {
background-color: #55c4af;
padding: 25px;
color: #ffffff;
}
.blue-link a {
color: #bacefe;
}
.blue-link a:hover {
color: #ffffff;
}
/*Removes date and comment count from under Blog title*/
.meta-comment-count, .meta-date {
display: none!important;
}
div#single-meta li:last-child {
display: none !important;
}
/*Removes large date from Blog list*/
article.post .post-meta {
display: none !important;
}
/*Adds border to Featured Images on the Blog page*/
I have the same issue as others with the header text being cut off if it runs into a second line on mobile, unless the header size is 300 px or higher. I resolved this issue by using your previously listed solution for text size reducing on Mobile.
@media only screen and (max-width: 690px) {
#page-header-bg .span_6 h1, .single.single-post .section-title h1 {
font-size: 3.5vw!important;
line-height: 2.5vh!important;
}
}
@media only screen and (max-width: 1000px) and (min-width: 690px ){
#page-header-bg .span_6 h1, .single.single-post .section-title h1 {
font-size: 3.5vw!important;
line-height: 4.5vh!important;
}
}
However, it doesn't really resolve the issue well. As you will see from the related URL, the header text is often much smaller than necessary, failing to use the extra space to it's right or the full header height available. In addition, the text is always at the very top of the header field instead of centered vertically, which just looks silly. And for a header, really I'd prefer the text to not reduce in size but maintain a nice large size.
So is there a way for the header size to become responsive instead of the text? For the header to increase in size at tablet/mobile screen sizes to fit the text? I don't mind if at desktop resolutions I can't specify a header height. If it needs to be responsive at all screen sizes and just expand or contract to fit the necessary text height (along with padding on the top and bottom) I am perfectly okay with that. And is there a way to keep that text vertically centered?
Thank you! I appreciate how fast you always are with resolving my questions!
I\'m not sure why this was closed, but I have yet to receive a reply. I am attaching an image to illustrate what my issue is with the blog header text on mobile (the CURRENTLY image), versus what I would like (the DESIRED images).
Personally I don\'t really care which of the two solutions is provided. 1. The header text is only increased to fill the maximum width and is centered vertically within the existing header height. 2. The header height becomes responsive itself and is taller on mobile to fit a larger text size. I think option 2 looks better, but I also realize having a responsive header height is probably harder to code than just a responsive blog h1 field.
Hey ,
Please update the theme as we have revised header logic. Update the Theme to 7.0.2 which has many Bug Fixes and New Features , See changelog : http://themenectar.com/changelogs/salient.html .
Update the theme by following this guide: https://themenectar.ticksy.com/article/3218/ . Also see Visual Composer update instructions in here: https://themenectar.ticksy.com/article/5182/
ThemeNectar Support Team
Thank you.
I updated the theme and plugin successfully. The text is now centered vertically.
However, whether I assign a pixel value for the header height (right now it\'s 225) or leave it blank, it is now the same height on mobile as it is for desktop. You can see my original link for yourself that when on a desktop, the amount of header space above and below the text is reasonable. However, the header size is gigantic with blank space on mobile.
Now, if the header size must remain that large, I am perfectly fine with that. But if so, then the text needs to be larger so that it at least stretches to fill the entire line width (which it still doesn\'t do) or maybe even span into 2 lines of text with a larger font size, as it does on desktop for longer header titles.
Hey Again,
See screenshot: http://prntscr.com/9ukwtu . You have removed the elements using custom css therefore there is a gap .
Also there is this min-height added: http://prntscr.com/9ukxru . Remove that as well.
Best.
ThemeNectar Support Team
The min-height: 250px is not in my custom CSS. I double checked, even doing a text search for \"250\". With the theme update now, I actually removed the CSS for responsive header text that I mentioned in the original post and now the text is actually larger, to my satisfaction.
I also experimented on a blog post by entering a header height and then again by having that field blank. With the new theme update it seems that the header height field only applies to desktop displays. It ignores the pixel size when on tablet or mobile... which is a good thing I guess? However, no where can I find in the theme\'s styles.css or my custom css the min-height entry. Here is a copy of the custom CSS entered into the Salient CSS box just so you can see for yourself. Where is it pulling that min-height? It has that same CSS min-height for each blog post when I do a code inspection, despite each post having a different header height configured as an experiment (e.g. 175, 225, 250, etc)
.homepage-trans-textbg {
color: #111111;
background-color: rgba(255, 255, 255, 0.6);
}
.dark-trans-textbg {
background-color: rgba(0, 0, 0, 0.2);
}
.imgborder {
border: 2px solid #cccccc;
}
.bg-blue {
background-color: #2c58c6;
padding: 25px;
color: #ffffff;
}
.bg-mint {
background-color: #55c4af;
padding: 25px;
color: #ffffff;
}
.blue-link a {
color: #bacefe;
}
.blue-link a:hover {
color: #ffffff;
}
/*Removes date and comment count from under Blog title*/
.meta-comment-count, .meta-date {
display: none!important;
}
div#single-meta li:last-child {
display: none !important;
}
/*Removes large date from Blog list*/
article.post .post-meta {
display: none !important;
}
/*Adds border to Featured Images on the Blog page*/
.single article.post .content-inner .post-featured-img img {
border: 2px solid #cccccc;
}
/*Adds border to Featured Images on the main Blog page*/
article.post .content-inner .post-featured-img img {
border: 2px solid #cccccc;
}
/*Mobile Menu Settings*/
div#mobile-menu {
background-color: #251f1e !important;
color: #c6bfb4;
}
div#mobile-menu ul li a {
font-size: .9em;
color: #c6bfb4;
}
/*Mobile Search Box Settings*/
#mobile-menu input[type=text]{
background-color: #362e2b !important;
border-color: #fff !important;
box-shadow: none !important;
}
.n-shortcode .nectar-love{display:none !important;
}
/*Toggle Panel Text*/
html body .toggle h3 a {
font-size: 22px !important;
color: #555555 !important;
}
#call-to-action {
font-size: 30px !important;
}
Hey Again,
Its in responsive.css. Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1000px) and (min-width: 1px) { body.single-post #page-header-bg:not(.fullscreen-header) { min-height: 100px!important; } }Best.
ThemeNectar Support Team
Thanks so much!