WordPress.org

Ready to get started?Download WordPress

Forums

Full-Width Sticky Footer, Twenty Twelve Child Theme (1 post)

  1. mcography
    Member
    Posted 11 months ago #

    I am trying to figure out how to make a full-width footer on a twenty twelve child theme, and I cannot figure it out. I want to have three widgets in the footer centered underneath the page div with a full-width gray background.

    I know there must be an easy solution to this, but I'm stuck. What am I doing wrong?

    My footer code:

    </div><!-- #main .wrapper -->
    
        <footer id="colophon" role="contentinfo">
    
    		<?php
    		    /* footer sidebar */
    		    if ( ! is_404() ) : ?>
    		        <div id="footer-widgets" class="widget-area three">
    		            <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
    		                <?php dynamic_sidebar( 'sidebar-5' ); ?>
    		            <?php endif; ?>
    
    		            <?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
    		                <?php dynamic_sidebar( 'sidebar-6' ); ?>
    		            <?php endif; ?>
    
    		            <?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
    		                <?php dynamic_sidebar( 'sidebar-7' ); ?>
    		            <?php endif; ?>
    		        </div><!-- #footer-widgets -->
    		<?php endif; ?>
    
        </footer><!-- #colophon -->
    
        </div><!-- #page -->
    
        <?php wp_footer(); ?>
        </body>
        </html>

    My CSS:

    /* FOOTER
    -------------------------------------------------------------- */
    
    	/* make footer full-width
    	-------------------------------------------------------------- */
    	footer[role="contentinfo"] {
    		max-width: 100%;
    	}
    
    	#colophon {
    		background-color: #7d7d7d;
    	}
    
    	/* ===[ Footer Widget Areas ]=== */
    
    	.site-info {
    		clear: both;
    	}
    
    	#footer-widgets {
    		width: 100%;
    		border-top: none;
    		background-color: #7d7d7d;
    	}
    
    	#footer-widgets .widget li {
    		list-style-type: none;
    	}
    
    	.template-front-page #footer-widgets {
    		padding-top: 0;
    	}
    
    	@media screen and (min-width: 600px) {
    		#footer-widgets.three .widget + .widget + .widget {
    			margin-right: 1.71429rem;
    			}
    
    		#footer-widgets.three .widget {
    			clear: none;
    			float: right;
    			margin-right: 1.71429rem;
    			max-width: 26%;
    			width: 26%;
    		}
    	}
    
    	@media screen and (max-width: 600px) {
    		#footer-widgets.three .widget {
    			margin-left: 2rem;
    			}
    		}
    	}

Reply

You must log in to post.

About this Topic