Responsive Backstretch Image in AgentPress Pro

In Genesis Facebook group a user asked,

Sridhar, are you able to create a tutorial on the Backstretch header image scaling issue on mobile devices for the AgentPress Pro theme?

Like in my tutorial for Digital Pro we can add the backstretch image inside the .home-featured div above the .wrap, show it only at 768px and below and finally hide the backstretch image for smaller screen widths in AgentPress Pro.

The backstretch image will appear inline so it is responsive and not cut off on smaller screens.

Step 1

In AgentPress Pro’s front-page.php replace

function agentpress_home_featured_widget() {

    genesis_widget_area( 'home-featured', array(
        'before' => '<div class="home-featured full-width widget-area"><div class="wrap">',
        'after' => '</div></div>',
    ) );

}

with

function agentpress_home_featured_widget() {

    genesis_widget_area( 'home-featured', array(
        'before' => '<div class="home-featured full-width widget-area"><img src="' . preg_replace( '/^https?:/', '', get_option( 'agentpress-home-image' ) ) . '" class="agentpress-home-image" /><div class="wrap">',
        'after' => '</div></div>',
    ) );

}

Step 2

Edit style.css.

a) Above the media queries, add

@media only screen and (min-width: 769px) {

    .agentpress-home-image {
        display: none;
    }

}

.agentpress-home-image {
    vertical-align: top;
}

b) In the 768px media query,

change

.home-featured .wrap {
    padding: 40px 5% 0;
}

to

.home-featured .wrap {
    padding: 0 5% 5% 5%;
}

then below

.home-featured .widget.property-search,
.home-featured .widget.property-search:last-child {
    margin-top: 40px;
}

add

.home-featured .widget.property-search:last-child {
    margin-top: 0;
}

and lastly, add

.backstretch {
    display: none;
}