--> How to make 'Posts' and 'Sidebar' column responsive? | Experience Lab - Online business creation and development guide for bloggers and startups

How to make 'Posts' and 'Sidebar' column 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 stylesh...

make content area responsiveI 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!

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

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.

posts and sidebar columns

BEFORE:

Posts float to left of Sidebar

 

AFTER:

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

responsive posts column

The sidebar column will come second in the row:

responsive sidebar column

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.

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! =)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How to make 'Posts' and 'Sidebar' column responsive?
How to make 'Posts' and 'Sidebar' column responsive?
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1S_gCgxT0F9-v60Z0fUrqto_4CTWiSFGktBfS-v0hXrYVSXWdL73KGe7X7M5KAuPiJM3kdpU0G2mgmhhScbZmVoi0fg8oVBmflJzOvVhOoN_Nx3Eib2DXXF0oumTe5Zbaa_hDS44jtOg/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1S_gCgxT0F9-v60Z0fUrqto_4CTWiSFGktBfS-v0hXrYVSXWdL73KGe7X7M5KAuPiJM3kdpU0G2mgmhhScbZmVoi0fg8oVBmflJzOvVhOoN_Nx3Eib2DXXF0oumTe5Zbaa_hDS44jtOg/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2015/08/how-to-make-and-column-responsive.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2015/08/how-to-make-and-column-responsive.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy