Making central area larger

• 

  meepinganime · Member · Aug 4, 2014 at 5:39 pm

  • Copy link
  • Add topic to favorites

  Hey!

  I’m relatively new to CSS, only having had minimal experience. I’ve managed to change a few things, but the part i’m having trouble with is making my central area larger, as whenever I put code in it, it only makes one of the columns larger, and it’s a two-column design.

  Probably a really easy solution, but thank you anyway! ^^

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

• 

  eurello · Staff · Aug 5, 2014 at 7:24 pm

  • Copy link

  Hi there,

  It’s actually not a simple question. ;) See how you like it if you put this in your CSS:

  .wrap {
      max-width: 100%;
  }

  That’s not exactly what you’re asking for, but it changes this fixed-width theme into a fluid-width theme, which widens all columns to take advantage of your full screen size. The nice thing about this is that it also adjusts for mobile devices.

  Let me know what you think!

• 

  designsimply · Member · Sep 2, 2014 at 5:08 pm

  • Copy link

  To extend this a bit, you can also adjust the container widths for areas inside the .wrap element to make the middle column bigger and the right sidebar area with the widgets smaller by changing those two percentages but also being careful to make it so they don’t add up to be greater than 100% or the page structure will fall apart.

  I used built in browser tools to find out that the “.site-content” container is about 67% and the “#main .widget-area” container is 32.5%. Knowing that, here is an example that will increase the middle column (content) by 10% and decrease the widget area by 10% at the same time:

  @media (min-width: 650px) {
  	.site-content {
  		width: 77%;
  	}
  	#main .widget-area {
  		width: 22.5%;
  	}
  }

  I used a media query to limit the rule to large screens because at at smaller screen sizes the Sunspot theme automatically makes all of those columns 100% and you probably don’t want to change that for smaller screens.

  You can find out more about media queries at http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  If you want to change the widths, try experimenting with the numbers and make sure to subtract from one what you add to the other.