I'm having great difficulties trying to adjust the text in the header areas for different screen sizes - I can sually manage to change the font sizes, but the line-height just won't be changed.
This is the CSS I've tracked down in the responsive.css file that I think is right (and how I've put it in my custom.css file):
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
.#page-header-bg .span_6 h1 {
font-size: 30px !important;
line-height: 36px !important;
}
#page-header-bg .span_6 span.subheader {
font-size: 18px !important;
}
}
@media only screen and (min-width : 690px) and (max-width : 1000px) {
Note for that last one, despite the line-height of 15px, it still has a very wide line-height.
Is there some simpler way of adjusting the h1 and subheader in the mastheads for different screen sizes? And why can't I seem to ajust the line-height od the sub header?
Any help would be much appreciated. At the moment, those masthead areas just aren't looking very good at smaller screen sizes.
I'm having great difficulties trying to adjust the text in the header areas for different screen sizes - I can sually manage to change the font sizes, but the line-height just won't be changed.
This is the CSS I've tracked down in the responsive.css file that I think is right (and how I've put it in my custom.css file):
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
.#page-header-bg .span_6 h1 {
font-size: 30px !important;
line-height: 36px !important;
}
#page-header-bg .span_6 span.subheader {
font-size: 18px !important;
}
}
@media only screen and (min-width : 690px) and (max-width : 1000px) {
#page-header-bg .span_6 h1 {
font-size: 14px !important;
line-height: 18px !important;
}
#page-header-bg .span_6 span.subheader {
font-size: 15px !important;
}
}
@media only screen and (max-width : 690px) {
#page-header-bg .span_6 h1, .single.single-post .section-title h1, h1 {
font-size: 18px !important;
line-height: 18px !important;
margin-bottom: 4px !important;
margin-top: 20px !important;
}
#page-header-bg .span_6 span.subheader {
font-size: 15px !important;
line-height: 15px !important;
}
}
Note for that last one, despite the line-height of 15px, it still has a very wide line-height.
Is there some simpler way of adjusting the h1 and subheader in the mastheads for different screen sizes? And why can't I seem to ajust the line-height od the sub header?
Any help would be much appreciated. At the moment, those masthead areas just aren't looking very good at smaller screen sizes.
Hey William! Try changing that snippet to this instead to get it to apply right:
body #page-header-bg .span_6 span.subheader { line-height: 20px !important; display: block!important; }Fantastic, now I have control. Thankyou!