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!
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:
- The Parent container has these IDs: #lower, #lower-wrapper
- The Child containers have this ID: #lowerbar-wrapper
- The menu above footer has this ID: #menubottom-container
- 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! =)
