Making footer widgets responsive

1 Views

I have 4 footer widgets in the theme I’m working on. It works great. The only thing that I can’t get to work is the responsiveness of the widgets. The 4 footer widgets keep on showing up next to each other on smaller screens, and I need them to be on top of each other for smaller screens. Can any one help me around this problem. Here is my code : 

<div id="footerwidget" <?php pietergoosen_voet_widgets_klas(); ?>>
<?php if ( is_active_sidebar( 'sidebar-15' ) ) : ?>
<div id="first" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-15' ); ?>
</div><!-- #Eerste .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-16' ) ) : ?>
<div id="second" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-16' ); ?>
</div><!-- #Tweede .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-17' ) ) : ?>
<div id="third" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-17' ); ?>
</div><!-- #Derde .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-18' ) ) : ?>
<div id="forth" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-18' ); ?>
</div><!-- #Vierde .widget-area -->
<?php endif; ?>

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Set the width of the div to 100% and remove the float for the media query used for smaller screens like this:

    @media screen and (max-with 600px){

.widget-area{
float: none;
width: 100%;
}

}

    And for the desktop view:

    @media screen and (min-with 600px){

.widget-area{
float: left;
width: 25%;
}

}

    BTW, this is just CSS related and has nothing to do with WordPress