Replies: 0
Using header images (not featured) on pages, I am trying to move the h1 title so that it overlays the header image and is vertically centred on desktops. My CSS solution is not ideal because:
At the moment the h1 title is too near the bottom of the header image, to stop it going off the top of the header into the menu area, when adjusting the width of the browser.
At the moment the gap between the header image and the first line of the body text is a little too big on desktops but too narrow on mobiles.
I realise that the h1 title will re-position on smaller screens.
The CSS is:
/* Overlay h1 entry title on header, adjust font size, colour, add grey shadow and position on header */
@media screen and (min-width: 600px) {
h1.entry-title {
font-size: 23px !important;
color: #ffffff !important;
text-shadow: 1px 1px 2px #666666 !important;
margin-top: -200px !important;
}
}
/* Adjust margin above body text */
@media screen and (min-width: 600px) {
.entry-content, .entry-summary {
margin-top: 130px !important;
}
}The test site is at