Support » Theme: Twenty Twelve » 3 Footer widgets, collapse at breakpoints

  • Resolved wfeu

    (@wfeu)


    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 11 months, 1 week ago by wfeu.
    • This topic was modified 11 months, 1 week ago by wfeu.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Something like this should work

    @media screen and (max-width: 600px) {
    	#mywidgets > div {
    		width: 100%;
    	}
    }

    You can set the 600px value to whatever you’d like where you want them to switch over to the stacked version.

    That works! Thank you~!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘3 Footer widgets, collapse at breakpoints’ is closed to new replies.