3 Footer widgets, collapse at breakpoints

I made a Twenty Twelve child theme with 4 extra widget areas. Top right social icons – using font awesome and a menu widget and three new widgets in the footer.

Id like the footer widget areas in the footer to collapse – stack on top each other as the screen size becomes smaller.

On large screens I like all widgets side by side (3 columns like) but on smaller device I want them to be stacked full width.

Code Im using:
in functions.php

function LD19twentytwelvechild_widgets_extra() {

    register_sidebar( array(
        'name' => __( 'Social Icons Header', 'twentytwelve' ),
        'id' => 'social-icons-top',
        'description' => __( 'Found at the top of every page (except 404s and optional homepage template) Center Footer Widget.', 'mytheme' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer 1', 'twentytwelve' ),
        'id' => 'footer-1',
        'description' => __( 'Found at the top of every page (except 404s and optional homepage template) Center Footer Widget.', 'mytheme' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="mywidget-title">',
        'after_title' => '</h2>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer 2', 'twentytwelve' ),
        'id' => 'footer-2',
        'description' => __( 'Found at the top of every page (except 404s and optional homepage template) Center Footer Widget.', 'mytheme' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="mywidget-title">',
        'after_title' => '</h2>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer 3', 'twentytwelve' ),
        'id' => 'footer-3',
        'description' => __( 'Found at the top of every page (except 404s and optional homepage template) Center Footer Widget.', 'mytheme' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="mywidget-title">',
        'after_title' => '</h2>',
    ) );

}
add_action( 'widgets_init', 'LD19twentytwelvechild_widgets_extra', 11);

and my footer.php

<div id="mywidgets">

<div id="footer-1">

	<?php
	if(is_active_sidebar('footer-1')){
	dynamic_sidebar('footer-1');
	}
	?>
</div>

	<div id="footer-2">

	<?php
	if(is_active_sidebar('footer-2')){
	dynamic_sidebar('footer-2');
	}
	?>
	</div>

		<div id="footer-3">

		<?php
		if(is_active_sidebar('footer-3')){
		dynamic_sidebar('footer-3');
		}
	?>

		</div>
</div>

and in my child theme css

	 #footer-1 {
		
		float: left;
		width: 33.3%;
		padding-right: .1%;
		
	 }
	 #footer-2 {
		
	
		float: left;
		width: 33.2%;
		padding-right: .1%;
		
	}
	#footer-3 {
		
		float: right;
		width: 33.3%;
		
	}

	#mywidgets {
		width: 100%;
		padding-top: 17px;
		color: #444;
		line-height: 2;

	}

Thanks!

• This topic was modified 5 years, 2 months ago by wfeu.
• This topic was modified 5 years, 2 months ago by wfeu.