I want to fix a responsive WordPress feature box

Question

I want to create a feature box for Eleven40 Pro Wordpress theme. Here's the PHP I used:

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

}}

And here's my 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;
}

My problem is the top of feature box disappears beneath the navbar when I expand my browser window. You can see it here: http://bryancollins.eu/wp/ .

How can I fix this? And is this easy to make this feature box responsive?

Thanks for the help.

Answer 1

Try adjusting the margins with media queries:

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