increase width percentage of content and decrease width of sidebar area

• 

  myuransblog · Member · Mar 10, 2014 at 10:51 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  For a particular page, I would like to increase the width of the content area and decrease the width for the sidebar in percentages so that it works for any browser window sizes and also works for tablet and mobile.

  I have decreased the width of the widget area (and widget) by

  .widget {
  width: 80% !important;
  }

  .widget-area {
  width: 15% !important;
  margin: 0;
  text-align: center;
  }

  – but can’t seem to increase the content width.

  The page is http://myuranelango.com/scrapbook/

  Thanks in advance :)

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

• 

  hfzrhmn · Member · Mar 11, 2014 at 12:26 am

  • Copy link

  Hello,

  The first thing you want to do is remove the following code from your custom CSS:

  .widget {
  	width: 80% !important;
  }
  
  .widget-area {
  	width: 15% !important;
  	margin: 0;
  	text-align: center;
  }

  And then add this:

  @media only screen and (min-width: 768px) {
  	.page-id-100 #primary {
  		width: 80%;
  	}
  	.page-id-100 #secondary {
  		width: 15%;
  	}
  }

  This will modify the layout width as requested, for the specific page only.

  Now, while the content area is already widened, I can’t seem to find a way to make the gallery make use of the entire available space. Perhaps thesacredpath or others here can help with that.

• 

  myuransblog · Member · Mar 16, 2014 at 5:12 pm

  • Copy link

  Brilliant! Thanks for your help !!