Pachyderm Theme: Need to change the width of blog

• 

  wolfgirlalice · Member · Oct 18, 2015 at 10:52 am

  • Copy link
  • Add topic to favorites

  Hi there, I just changed themes to Pachyderm and had previously set the width of the entire blog to 1030px (header, body and sidebars together with probably 20px of padding to space them out – main body was about 800px). Since changing theme the html code has gone all wrong and I wanted to know if it was possible to reinsert some code that would widen the blog again. I write long posts, reviews and things, so ideally I want more body space.

  Secondly, as a side question, I wanted to know if it was possible to cancel out the space between the bottom of my header image and the menu bar so that the blog flows more smoothly.

  Thank you for your help!

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

• 

  g471n · Member · Oct 18, 2015 at 11:54 am

  • Copy link

  Hi Angel

  To set the width add the following custom CSS.

  .active-sidebar-primary-sidebar #page, .page-template-nosidebar-page-php #page {
      width: 1030px;
  }
  #header, #main, #content-bottom, #breadcrumb, #footer {
      width: 800px;
  }

  To add custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save.

• 

  g471n · Member · Oct 18, 2015 at 12:00 pm

  • Copy link

  To remove the space below the header image add:

  #masthead img {
      margin-bottom: 0em;
  }

  Let me know if you need any more help.

• 

  wolfgirlalice · Member · Oct 18, 2015 at 12:46 pm

  • Copy link

  Thank you very much g471n – it worked perfectly and my blog now looks wonderful! :)

• 

  g471n · Member · Oct 18, 2015 at 4:00 pm

  • Copy link

  You are welcome.

  One extra tweak we should make is to only have the width change on window sizes above 1030px This will keep your site responsive and display well on smaller screens and mobile devices.

  This should do the trick.

  @media screen and (min-width: 1030px) {
  	.active-sidebar-primary-sidebar #page, .page-template-nosidebar-page-php #page {
      width: 1030px;
  }
  }
  @media screen and (min-width: 1030px) {
  	#header, #main, #content-bottom, #breadcrumb, #footer {
      width: 800px;
  }
  }