Decrease Size of Widget Sidebar – Increase size of Content

• 

  kaialea08 · Member · Apr 24, 2015 at 4:39 am

  • Copy link
  • Add topic to favorites

  Decrease Size of Widget Sidebar – Increase size of Content

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · Apr 24, 2015 at 7:27 am

  • Copy link

  Hi

  Now, you have this responsive layout:

  @media screen and (min-width: 850px) {
  	.content-area {	float: left; width: 68.86440%; }
  .content-wrapper .content-area {
  		float: left;	margin: 0; 	width: 620px;  }

  That means you have two areas. .content-area is where your main content is and .sidebar-widget-area defines your right column. These areas has different rules to apply depending on the width of your screen. For instance, -content-area as a 68.86% width in 850px screens or wider and 620px in other case.

  Having that in mind, you can alter those width values. I give you a custom CSS example I propose you to adapt to your needs. I hope this helps you.

  .content-wrapper .content-area { float: left; width: 300px ;  }
  .sidebar-widget-area {float: right; width: 100px ;  } 
  
  	@media screen and (min-width: 850px) {
  			.content-wrapper .content-area {float: left; width: 80% ;}
  			.sidebar-widget-area {float: right; width: 15% ;}}

  Enjoy blogging!