CSS Help Request

[paulminors]

Hi there,

I’m a complete CSS noobie and need some help. I have a wordpress site and I’m trying to remove the sidebar on my blog posts as this feature doesn’t come standard in the theme settings.

If you have a look at this page: https://paulminors.com/the-productivity-habits-of-a-social-media-consultant/

I’ve had a play around with the CSS when I inspect the sidebar using Chrome. I’d like to remove the sidebar and have the primary content fill the space where the sidebar was so it’s centered and wider. I can get as far as removing the sidebar, but can’t seem to adjust the main body of content.

What custom CSS would I use to achieve this?

Thanks,
Paul

[Atelierbram]

So after you edited the template(s) of your current WordPress theme, and removed or out-commented the lines that say <?php get_sidebar(); ?> .

<?php // get_sidebar(); ?> 

Basically remove or out-comment all of the float: left declarations on content wrappers in CSS, and change the width declarations to min-width and move those to a section within a media-query. When you set a max-width on all the paragraphs, then the text line-length will not get too wide. After that you will have to look into adjusting the width of the content wrapper(s) in different media-queries.

#content {
  /* width: 930px; */
  margin: 60em 5em;
  margin-top: 60px;
}

p {
  max-width: 60em;
}

/* example media-query */
@media (min-width: 960px) {

  #content {
    max-width: 60em;
    margin: 60em auto;
  }
  article.post {
    min-width: 620px;
  }

}

P.S. you can remove the #primary-wrapper from the markup in the templates; it’s no longer needed.

[paulminors]

Thanks for sharing, I’ll give this a go! :)

[Author]

Posts