php - 我想修复响应式 WordPress 功能框

Question

我想为 Eleven40 Pro Wordpress 主题创建一个功能框。这是我使用的 PHP:

add_action( 'genesis_after_header', 'genesis_featured_box' );
function genesis_featured_box() {
if ( is_front_page() && is_active_sidebar( 'featured-box' ) ) {
       genesis_widget_area( 'featured-box', array(
        'before' => '<div class="featured-box widget-area">',
        'after'  => '</div>',
    ) );

}}

这是我的 CSS

.featured-box {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #000;
    color: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
    overflow: visible;
    padding: 20px;
    width: auto;
}

.featured-box h4 {
    font-size: 20px;
    color: #fff;

}

.featured-box p {
    padding: 0 0 20px;
}

.featured-box ul {
    margin: 0 0 20px;
}

.featured-box ul li {
    list-style-type: disc;
    margin: 0 0 0 30px;
    padding: 0;
    align: right;
}

.featured-box .enews p {
    padding: 10 10 10 10px;
    color: #fff;
      float: left;
      width: 220 px;
       margin: 10 10 10 10px;

}

.featured-box .enews #subscribe {
    padding: 20 20 20 20px;;

}

.featured-box .enews #subbox {
    background-color: #fff;
    margin: 0;
    width: 300px;

}

.featured-box .enews .myimage {

      float: right;
      margin-left: 10px;
      margin-right: 10px;
          width: auto;
}

.featured-box .enews input[type="submit"] { 
background-color: #d60000;
     padding: 10 10 10 10px;
      width: 150px;

}

.widget li {

border-bottom: none;
}

我的问题是，当我展开浏览器窗口时，功能框的顶部在导航栏下方消失了。你可以在这里看到它:http://bryancollins.eu/wp/ .

我该如何解决这个问题？ 使此功能框具有响应性是否容易？

感谢您的帮助。

Answer 1

尝试使用媒体查询调整边距:

@media screen and (min-width: 1024px) and (max-width: 1139px) {
    div.featured-box {
        margin-top: 135px;
    }
}

@media screen and (min-width: 1140px) {
    div.featured-box {
        margin-top: 70px;
    }
}