CSS to remove sidebar

• 

  alphaautophotography · Member · Jul 30, 2015 at 1:42 am

  • Copy link
  • Add topic to favorites

  Hi

  Would love some help with custom CSS to remove the sidebar on the Canard theme. Thanks!

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

• 

  alphaautophotography · Member · Jul 30, 2015 at 1:43 am

  • Copy link

  Also, if someone can help direct me on how to enlarge the logo on the site that would be much appreciated!

• 

  thesacredpath · Member · Jul 30, 2015 at 10:31 pm

  • Copy link

  Hi there, add the following to take the content full width.

  .site-main {
      border-right: none;
      width: 100%;
  }
  #secondary {
      display: none;
  }

  On the site logo, we can enlarge it, but it will lose quality since the theme and WordPress software actually make a new smaller image for use as the logo. We can though add the logo to the parent div and then hide the existing logo and keep the link so people can click on the image to get back to your main page. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  site-branding {
      min-height: 200px;
      background: url('https://alphaautophotography.files.wordpress.com/2015/04/aplha_black-03.png') no-repeat scroll center top;
      background-size: contain;
  }
  .site-logo-link img {
      visibility: hidden;
  }

• 

  alphaautophotography · Member · Aug 4, 2015 at 9:26 pm

  • Copy link

  Hi thank you for your help, I don’t think i am doing it correctly though! The logo went away and the sidebar is still there as a blank white space. Not sure where I need to put the sidebar code and what else I have to do for the logo to work. I have tried to learning coding but just doesn’t get through to me, sorry!

• 

  thesacredpath · Member · Aug 5, 2015 at 7:00 pm

  • Copy link

  There were a couple of rules missing from your CSS, the first two I gave in my previous response, and I missed the leading period ( . ) on the site-branding code above. Remove what you have and paste in the following and it should get you want you want.

  .site-branding {
      background: rgba(0, 0, 0, 0) url("https://alphaautophotography.files.wordpress.com/2015/04/aplha_black-03.png") no-repeat scroll center top / contain ;
      min-height: 200px;
  }
  .site-logo-link img {
      visibility: hidden;
  }
  #secondary {
      display: none;
  }
  .site-main {
      border-right: 0 none;
      width: 100%;
  }