Hình ảnh Backstretch đáp ứng trong AgentPress Pro

Trong nhóm Genesis Facebook, một người dùng đã hỏi,

Sridhar, bạn có thể tạo hướng dẫn về vấn đề chia tỷ lệ hình ảnh tiêu đề Backstretch trên thiết bị di động cho chủ đề AgentPress Pro không?

Giống như trong hướng dẫn của tôi dành cho Digital Pro, chúng ta có thể thêm hình ảnh backstretch bên trong div phía trên .wrap, chỉ hiển thị nó ở 768px trở xuống và cuối cùng ẩn hình ảnh backstretch để có chiều rộng màn hình nhỏ hơn trong AgentPress Pro..home-featured

Hình ảnh backstretch sẽ xuất hiện trong dòng để nó phản hồi nhanh và không bị cắt trên màn hình nhỏ hơn.

Bước 1

Trong front-page.php của AgentPress Pro thay thế

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>',
    ) );

}

với

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>',
    ) );

}

Bước 2

Chỉnh sửa style.css .

a) Bên trên các truy vấn phương tiện, hãy thêm

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

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

}

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

b) Trong truy vấn phương tiện 768px,

thay đổi

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

đến

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

sau đó bên dưới

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

cộng

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

và cuối cùng, thêm

.backstretch {
    display: none;
}