Make Your Multi Column "Blog Footer" Responsive

 

In this tutorial you will learn how to convert your three Column footer into a responsive and auto-adjusting footer wrapper by creating separate stylesheet for different device breakpoints. Your blog footer could be a single column, 2 column, 3 or even 4 column, it may contain multiple rows and columns but the idea behind mobile optimized layouts is a simple concept which if understood would make it really simple for you to play around all elements on your blog and make them mobile responsive. I am sharing below the tutorial for blogger blogs but this methodology can be applied across all platforms. We have already learned how to mobilize Blog header and content area and now we need to play around the footer. Lets get to work then!

If you have a simple footer and looking for a multi-column footer then try one of this:

• READ: Multi Column Blog Footer widget for blogger
• READ: Add a Customized 3 Column Footer

 

Tutorial Series

1. Design a Responsive Blogger Template

2. Common Device Breakpoints For a Responsive Blogspot Template

3. Hiding Widgets & Scripts in Mobile Templates [1], [2]

4. Design a Mobile Responsive Drop Down Menu for Blogger

5. Using Mobile Friendly Images in Blogger.

6. Create Mobile Responsive AdSense Ads and Safely Hide AdSense units

7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

View Summary!

Layout of a Basic Blog Footer

The basic structure of any blog footer consists of a Parent container followed by Child containers which resides inside the parent node. The illustration below shows a 3-column footer where the black border represents the Parent container and Pink borders represent Child containers.

All you need to do is to inspect and find the IDs or classes of your Parent and Child nodes using the browser inspect tool found in both Chrome and Firefox.

• Read: Use Chrome Inspect Tool

BEFORE: Desktop version

 

AFTER: mobile version

 

or you can further simplify the widgets using mobile conditional tags. In our case we have shown only one widget in footer:

As you can notice that we have simplified the footer to just single widget (using isMobileRequest tag) in footer because mobile browsers are quite slow machines often due to slow internet connection and it is really recommended that you provide a fast loading experience to your Mobile readers by removing as many unwanted widgets as possible in mobile view.

In our case the IDs or Classes are as follows:

1. The Parent container has these IDs: #lower, #lower-wrapper
2. The Child containers have this ID: #lowerbar-wrapper
3. The menu above footer has this ID: #menubottom-container
4. The credit links at the bottom of footer has this ID: #credits-wrap

Add Responsive Styles to Device Breakpoints

Now you just need to add the following CSS codes in their respective breakpoints using the CSS Responsive Cheat Sheet (Refer Part#2) .

Start from 786px breakpoint which is ZONE4. You will add the following CSS code inside this zone as shown below:

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}

#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}

#credits p{text-align:center!important}

}

Thing to note:

• At first I assigned 100% width to all parent classes so that they may fit perfectly to screen size.
• Overflow hidden must be applied on both parent and child containers to ensure no horizontal scrollbar appears in mobile browser.
• Then I assigned a width of 90% to Child containers to ensure they do not overlap the parent containers and go out-of-screen. The padding 20px center aligns it, making it more readable.
• Note that I have not used display:none to remove sections that I don't want to display in mobile view, instead I have used the isMobileRequest tag to hide elements. I recommend you do the same. 
• Finally I have centered align the text in credits container.

The footer does not need further styles to be created for smaller breakpoints. The above format of responsive styles is enough to display the footer nicely and neatly on mobile phones.

That's it! You just learned how to mobile optimize the design of your blogger footer :)

Need help?

Do let me know if you encountered problems in identifying the Parent IDs or classes of your blog footer,  I can help you with that. I am trying my best to make this advance concept as simple as possible. It may sound techy for some but if you read all parts and ask us for help, you will be able to excel the most trending skill in web designing.

Peace and blessings buddies! =)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 8/17/2015