Full-width blog posts Zuki

• 

  writtininstone · Member · May 26, 2016 at 12:24 pm

  • Copy link
  • Add topic to favorites

  I’d like to make my blog posts full width as well as change the line spacing on the blog as a whole, like the full-width pages.

  I did go through the forums to see if the answer was there, but the one code I found didn’t work. So, I would appreciate the help! Thank you for your time.

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

• 

  siobhyb · Member · May 27, 2016 at 9:28 am

  • Copy link

  Hi Petra,

  Can you try adding the following CSS and let me know how that goes?

  @media screen and (min-width: 1023px) {
  .entry-content, .entry-summary, .blog .entry-meta, .single-post .entry-meta, #comments, #disqus_thread {
      max-width: none;
  }
  
  .entry-thumbnail img.wp-post-image {
      width: 100%;
  }
  }

  We can work on further tweaks from there.

• 

  writtininstone · Member · May 27, 2016 at 1:17 pm

  • Copy link

  siobhyb:

  Thank you so much for your help. What you gave me was great. That’s a lot better than I had before.

  I want the ‘full-width’ posts to look like full width pages. So, I think if we can get rid of the sidebar, we’d be able to do that.

  Here’s what a full-width page looks like:

  The Sith & the Senator

  and a wider post with the code you gave me:

  https://anunconventionalmind.wordpress.com/2016/05/21/the-sith-the-senator-2/

  The problem that I’ve generally encountered with WordPress.com is that pages cannot be used in the same way blog posts can, in if they could, I would use pages in my Zuki widgets. That would solve a lot of my problems.

  But not only is that not allowed but I can’t link the featured image in my posts or my post titles to full-width pages to get around that. The only thing I can do is attempt to make the posts themselves full-width.

• 

  siobhyb · Member · May 27, 2016 at 6:08 pm

  • Copy link

  Hi Petra,

  You’re welcome. :) If you add the following, then the post you linked to should display at full width:

  .single-post #primary {
      width: 100%;
  }

• 

  writtininstone · Member · May 27, 2016 at 6:34 pm

  • Copy link

  That’s absolutely perfect. Thank you very much. :)

  There’s one more thing just in case I ever want to: How do you change the line height?

• 

  siobhyb · Member · May 29, 2016 at 12:45 pm

  • Copy link

  Hi Petra,

  I’m glad that worked out for you!

  You can change the line-height for individual posts using the following CSS:

  .single-post .entry-content p {
      line-height: 1.9;
  }

  Increments/decrements of 0.1 are enough to have an impact. For example: 1.8, 1.9, 2, 2.1, etc.

  The line-height is currently set to the same value for posts and pages so I wonder if there’s another difference that you’re noticing between the two. Let me know if the above CSS works out for what you’re trying to achieve or if you’d like any further help.

• 

  writtininstone · Member · May 30, 2016 at 2:28 am

  • Copy link

  That actually did work, but I want to change it uniformly for the whole site. I’m sorry I didn’t make that clear! Thank you for your help.

• 

  kathrynwp · Staff · May 30, 2016 at 2:34 pm

  • Copy link

  You can try removing the element targeting single pages:

  .entry-content p {
      line-height: 1.9;
  }

  or I see that you’ve already added:

  p {
       line-height: 1.5;
  }

  Let me know if you’re all set now.

• 

  writtininstone · Member · May 30, 2016 at 3:31 pm

  • Copy link

  Thank you. That was perfect.

  Be well, guys. :)

• 

  kathrynwp · Staff · May 30, 2016 at 3:32 pm

  • Copy link

  You’re welcome!