Modern Portfolio Pro Responsive Custom Header Image

If you want to add a custom header image wider than the default size in the Modern Portfolio Pro child theme by StudioPress, you’ll need to modify the PHP code and CSS.

In this example, we’ll add a image which is 600 px width by 140 px height.

Demo Video

Here’s the step by step instructions:

Step 1 – functions.php

Lines 54 and 55, change the width and height to match your image.

add_theme_support( 'custom-header', array(
    'header_image'    => '',
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'height'          => 140,
    'width'           => 600,
) );

Step 2 – style.css

Line 895, change the width to match your image:

.title-area {
    float: left;
    padding: 12px 0;
    width: 600px;
}

Line 964, change the height to match your image:

.header-image .site-title a {
    float: left;
    min-height: 140px;
    width: 100%;
}

Line 1963, add the following CSS for Media Queries

@media only screen and (max-width: 640px) {

    .header-image .site-header .site-title a {
		background-size: contain !important;
	}
	
}

Note: As a guide, if your image where 700 px width, you would need to change the max-width: 640px to 740px in the above CSS for Media Queries