Remove blank righthand sidebar

• 

  keefrider · Member · Oct 8, 2013 at 6:32 pm

  • Copy link
  • Add topic to favorites

  Hello –
  I am setting up cotterpindesign.com on wordpress and I can’t figure out to get rid of the blank space on the right – I guess it’s the sidebar. I am not experienced with writing code. I do not plan to use the site as a blog per se so the sidebar really isn’t necessary. Can you help me get everything full-page?
  Thanks!

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

• 

  rachelmcr · Member · Oct 9, 2013 at 12:22 pm

  • Copy link

  Hi there,

  The blank space on the right is indeed the sidebar. In the Eventbrite Single Event theme you’re using on your site, you can remove that sidebar using custom CSS, which is part of your Custom Design upgrade.

  To add custom CSS, go to Appearance > Customize in your dashboard and select CSS from the Customize tools. In the CSS editor, you can enter the following CSS:

  .span8 {
  width: 100%;
  }
  
  .span4 {
  display: none;
  }
  
  .main-container .container {
  border: 0;
  }

  The first part of this CSS stretches your page content to fit the whole width of the page. The second part removes the sidebar area completely. And the third part removes the vertical grey line that separates the two sections of the page.

  To learn more about how CSS editing works at WordPress.com, see this help page: Editing CSS

  If you have other CSS questions, most of our CSS support is done in our community forums by both staff and volunteers. You can create a new post in the CSS Customization forum to get additional help there:

  https://en.forums.wordpress.com/forum/css-customization

  Please let me know if you have any questions! :)

• 

  rachelmcr · Member · Oct 9, 2013 at 12:26 pm

  • Copy link

  Oops, sorry about that — I copied the wrong piece of CSS code for the last part of code I gave you. You should use this CSS code instead:

  .span8 {
  width: 100%;
  }
  
  .span4 {
  display: none;
  }
  
  .main-container .container:after {
  display: none;
  }