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

我想为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/。

我怎样才能解决这个问题？
这容易使此功能框响应吗？

谢谢您的帮助。

最佳答案

尝试通过媒体查询调整边距：

@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;
    }
}

关于php - 我想修复一个响应式WordPress功能框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23169489/