Full Width page

• 

  stuffymeowkins · Member · Jan 26, 2018 at 6:30 am

  • Copy link
  • Add topic to favorites

  I just recently changed my site’s theme to Canard and it unfortunately doesn’t have the “full-page” template in the “Page Attributes” section.

  Can I get rid of the side-bar/widget area on pages with Custom CSS?

  Thanks!

  Example: https://catbardblog.com/about/

  The right side of all of the pages is a huge block of blank because of it.

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

• 

  mommyhive · Member · Jan 26, 2018 at 6:56 am

  • Copy link

  Hi there,

  While waiting for staff reply, please check if widget visibility and remove widgets section in below document are of any help to your current scenario.
  https://en.support.wordpress.com/widgets/#widget-visibility

  Thank you.

• 

  thesacredpath · Member · Jan 26, 2018 at 8:34 am

  • Copy link

  Hi @stuffymeowkins, I’m seeing your about page nearly full width, except for the left/right white space on each side. Is this page now as you want it? If not, let me know.

• 

  stuffymeowkins · Member · Jan 26, 2018 at 9:37 pm

  • Copy link

  @iamrishaan Thanks for the suggestion, but the instructions only apply if the theme has the full-width template option when editing pages.

  @thesacredpath I’m trying to make the text go through the full-width of the page – most of the content of all the blogs and pages is delegating to only half of the page since the widget section (while blank) still takes up space.

• 

  thesacredpath · Member · Jan 27, 2018 at 12:12 am

  • Copy link

  @stuffymeowkins, thanks for the clarification.

  One thing to keep in mind is that for text, the optimal line length for readability is 66 characters per line, including spaces and punctuation and your content on post pages is around 63 characters as designed.

  My suggestion would be the following custom CSS, which centers the content on the single post pages and widens the content for screens 1380px and wider.

  .single .site-main {
    margin-left: auto;
    margin-right: auto;
    float: none;
    border: none;
    padding-right: 0;
  }
  @media screen and (min-width: 1380px) {
    .single .site-main .entry-content {
      max-width: 640px;
      width: 100%;
    }
  }

  The above widens things out to 81 characters per line. On screens/windows narrower than 1380px, the number of characters per line, as originally designed, it about 87.

• 

  thesacredpath · Member · Jan 27, 2018 at 12:15 am

  • Copy link

  And actually, let’s do the following instead which does posts and pages.

  .page .site-main, .single .site-main {
    margin-left: auto;
    margin-right: auto;
    float: none;
    border: none;
    padding-right: 0;
  }
  @media screen and (min-width: 1380px) {
    .page .site-main, .entry-content, .single .site-main .entry-content {
      max-width: 640px;
      width: 100%;
    }
  }

• 

  stuffymeowkins · Member · Jan 27, 2018 at 6:30 am

  • Copy link

  @thesacredpath

  Thank you so much!! This is exactly what I needed, and I appreciate the readability comments that puts things into perspective. The centering works really well, I find it way better.

  It works wonderfully. Really appreciate the help.

• 

  thesacredpath · Member · Jan 27, 2018 at 7:32 am

  • Copy link

  Hooray and you are welcome!