Mastering Sass

The markup

There's quite a bit of HTML so I'm going to break it up so it makes more sense before we look at styling it. We currently have a footer and inside that a div with a class of "footer-inner container".

Just above that we'll add another footer-inner div. We'll add a class of subfooter to that so we can style it. Inside the subfooter element we'll have three columns where our widgets will go:

<div class="footer-inner subfooter container"> 
    <div class="subfooter-widget"> 
        <!-- 1 --> 
    </div> 
    <div class="subfooter-widget"> 
        <!-- 2 --> 
    </div> 
    <div class="subfooter-widget"> 
        <!-- 3 --> 
    </div> 
</div>  

Now inside the first subfooter-widget column we will have a text widget and below that a social media links widget. Replace <!-- 1 --> with the following: ...