1

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; ?>

  • 1
    Are you searching for float:left;? – fuxia Apr 27 '13 at 10:45
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

0

You need to set the width of each div (first, second, third, forth) to 25% and use float:left.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.