There’s 2 steps you need to take to make your image span the full width of the site header and site container.
- Modify the height & width values for the Custom Header function in your child themes functions.php file
- Modify the CSS for the Site Header elements to match your header images dimensions and remove padding.
The PHP Modifications
The CSS Modifications
Modify the CSS declarations under the Site Header section of your child themes style.css file for these 4 classes.
You’ll find these 4 classes between lines 997 and 1062.
.site-header {
background-color: #fff;
}
.site-header .wrap {
}
.title-area {
width: 100%;
}
.header-image .site-title a {
min-height: 250px;
width: 100%;
}Here’s the result:
You can also remove the padding from smaller screen sizes:
@media only screen and (max-width: 1023px) {
/*
.site-header .title-area {
padding-bottom: 16px;
}
.site-header .wrap {
padding: 20px 0;
}
*/Image Cutoff on Smaller Screens
Try adding this in your Media Queries.
@media only screen and (max-width: 1188px) {
.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
}
}@media only screen and (max-width: 1023px) {
.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
}
}
@media only screen and (max-width: 600px) {
.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
}
}If you add the above code, you might find you’ll also need to remove padding.
Here’s the video showing the result:
The above solution is tested on the News Pro child theme by StudioPress.
Leave a Reply