Part 9: Make Your Blog's Post And Sidebar Area Responsive

I hope you have now learnt the basic steps required to make a layout responsive. You have already learned how to create a responsive stylesheet using CSS3 media queries and choosing the right breakpoints. Now you just need to start making each section fluid by creating separate stylesheet for each section and then adding these styles to the correct breakpoints or ZONES. We have already discussed how to make header widgets responsive and now we will discuss ways to create a mobile stylesheet for Content area which includes your Blog Posts column and Sidebar Column. Lets get to work!

Layout of content area

A Content area in blogspot is called the section which includes your blog posts and sidebar widgets. As shown in the two-column layout below, the left column includes the main Blog Widget and the right column consists of your Sidebar. Default templates have this layout structure but custom templates could be even 3 column or multi column. No matter whether you sidebar floats to right side or left, the method we will discuss today will give you a clear idea on how to make this static layout responsive.

BEFORE:

 

AFTER:

The Post Column will come first in the row and the sidebar column will be pushed down just below it.

The sidebar column will come second in the row:

Find Elements' Parent Classes or IDs

I have written a detailed tutorial that you can read to learn how to find what is the parent class or parent ID of any HTML element on your webpage using browser inspection method. We will use these Classes or IDs to control their appearances in mobile devices.

• Read: Use Chrome Inspect Tool

In our case the parent classes or IDs are as follow:

1. #outer-wrapper : This is the parent container that holds columns of Posts and Sidebar
2. #main-wrapper : This is Posts Column that floats to left.
   • #main-wrapper container also includes .post and .comments classes
   • .post class is used to style the Post body
   • .comments class is sued to style the comments body
3. #sidebar-wrap : This is Sidebar Column that floats to right.

Select 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) .

We will first choose the 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) {

#outer-wrapper{overflow:hidden!important;width:100%!important;}

#main-wrapper, .post, .comments {width:98%!important; overflow:hidden; }

.comments .comments-content {width:98%!important;}

#sidebar-wrap{float:none;margin:0 auto}

}

Thing to note:

• Never give the Parent and Child containers the same width in %. Always keep the First Parent container (#outer-wrapper in this case) at 100% width and Child classes at at 95% or less than 100%.
• Not keeping a width difference will make the container borders to overlap each other.
• This is why .post and .comments are given 95% width.
• Since the post container is given 98% width therefore it will push down the Sidebar column.
• For sidebar column you just need to make sure to remove the floating property by setting float:none; and center align it by setting margin:0 auto;

Keep testing and adding Styles to new breakpoints

We have set the styles to 768px screen width only i.e. ZONE4. To make sure your blog pages fit in perfectly in smaller screen sizes i.e. ZONE1 ,ZONE2 take care of the widths accordingly by reducing it further.

We have reduced the posts and comments container widths further to 94% and 96% respectively as shown below.

/*-----iPhone 2G, 3G, 4, 4S Portrait View ZONE1 ----------*/

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

#main-wrapper, .post, .comments{width:94%!important; overflow:hidden; }

}

/*-----iPhone 2G, 3G, 4, 4S Landscape View ZONE2 ----------*/

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

#main-wrapper, .post, .comments{width:96%!important; overflow:hidden; }

}

You can test and play further to make margin and padding of different elements as per your preferences.

A Post body may contain related posts widget, images, post info like labels/Date/Author name/Comments Count . You can now easily customize and optimize their widths and font sizes accordingly if needed. For images I will share a post soon on how to make all images on your blog responsive. Stay tuned for that.

Need Help?

Don't hesitate asking me for help in choosing the correct parent IDs/Classes of your blog Posts and Sidebar column. The above post gives you a clear idea of how to mobile optimize your content area for small screen devices. I hope you find it useful and worth trying. Stay tuned for a lot more fun and interesting posts!

Peace and blessings buddies! =)

Next Part