Making blog posts smaller on category pages

• 

  shewellliving · Member · Dec 29, 2014 at 10:17 pm

  • Copy link
  • Add topic to favorites

  Hi, I want to make the blog posts appear smaller under their respective categories and was wondering how to go about doing this. For example, blog posts categorized under ‘breakfast’ appear very large and I was wondering if there is a way to make them appear a bit smaller so that it is visually more appealing. Thanks in advance!

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

• 

  jeremeylduvall · Member · Dec 29, 2014 at 10:27 pm

  • Copy link

  Hi!

  Are you referring to the actual size of the image and content (i.e. shrink everything down a bit) or just truncate how much content of the blog post is shown (i.e. only show the first sentence so readers have to click the actual post)?

• 

  shewellliving · Member · Dec 29, 2014 at 10:38 pm

  • Copy link

  Both! I would like the content to shrink and also less of the information to be shown ( maybe more like the first 2 sentences or so!) Thanks!

• 

  jeremeylduvall · Member · Dec 29, 2014 at 11:24 pm

  • Copy link

  I would like the content to shrink

  I’m not sure changing the size of the font is the way to go, but if you would like, I can help you do that through CSS. Instead, I think a better way would be to modify how archive pages look. Can you try this out under Appearance -> Customize -> CSS?

  .has-post-thumbnail .entry-thumbnail {
  	width: 25%;
  	float: left;
  	clear: none;
  	padding-bottom: 0px;
  }
  
  .has-post-thumbnail .entry-header {
  	width: 70%;
  	float: right;
  	clear: none;
  }
  
  .has-post-thumbnail .entry-summary {
  	padding-top: 30px;
  	clear: both;
  }

  I think that’s closer to the look you want. Just a note, it’s specific to the Zuki theme so it might not work elsewhere. Can you let me know if that’s close to what you’re looking for or completely off-base?

  also less of the information to be shown

  For this, I would recommend creating excerpts as mentioned here:

  http://en.support.wordpress.com/splitting-content/excerpts/#creating-excerpts

  This way, you can modify what content is shown on the front page and category pages.

• 

  shewellliving · Member · Dec 30, 2014 at 7:04 pm

  • Copy link

  Hi, thanks so much for your help! I think what I am now looking towards doing now is just displaying the image and title in full size and eliminating the text summary entirely. Is that possible to do?

• 

  jeremeylduvall · Member · Dec 30, 2014 at 9:38 pm

  • Copy link

  Yep! Definitely possible. Can you give this a try?

  .has-post-thumbnail .entry-summary {
       display: none;
  }
  
  .has-post-thumbnail .entry-details {
       display: none;
  }
  
  .has-post-thumbnail .entry-meta.cf {
       display: none;
  }

  Also, I noticed you post quite a few recipes. Have you seen our Recipe shortcode?

  Recipes Shortcode

• 

  shewellliving · Member · Jan 7, 2015 at 4:59 pm

  • Copy link

  Hi, I like the way that looks with just the title showing. Is there a way to get the images a bit smaller and have them lined up side by side so that it looks more like the home page?

• 

  jeremeylduvall · Member · Jan 8, 2015 at 6:09 pm

  • Copy link

  Can you give this a try?

  .has-post-thumbnail .entry-summary {
       display: none;
  }
  
  .has-post-thumbnail .entry-details {
       display: none;
  }
  
  .has-post-thumbnail .entry-meta.cf {
       display: none;
  }
  
  .has-post-thumbnail .entry-thumbnail {
  	width: 25%;
  	float: left;
  	clear: none;
  	padding-bottom: 0px;
  }
  
  .has-post-thumbnail .entry-header {
  	width: 70%;
  	float: right;
  	clear: none;
  }

  The first three sections are the same. I just added in two new ones. You can either add the two bottom sections to what you already have or copy and paste the entire section and replace what we had setup before.

  Let me know how that looks!

• 

  shewellliving · Member · Jan 8, 2015 at 10:24 pm

  • Copy link

  Right now I like the way it looks (took what you gave me and made a few edits.) The only problem now is when you click an article to read it the image is in the way and the content gets cut off. Any advice?

• 

  jeremeylduvall · Member · Jan 8, 2015 at 11:21 pm

  • Copy link

  Can you try adding the .archive class in front of all of the selectors like this?

  .archive .has-post-thumbnail .entry-summary {
       display: none;
  }
  
  .archive .has-post-thumbnail .entry-details {
       display: none;
  }
  
  .archive .has-post-thumbnail .entry-meta.cf {
       display: none;
  }
  
  .archive .has-post-thumbnail .entry-thumbnail {
  	width: 60%;
  	float: left;
  	clear: none;
  	padding-bottom: 0px;
  }
  
  .archive .has-post-thumbnail .entry-header {
  	width: 80%;
  	float: left;
  	clear: none;
  }

• 

  shewellliving · Member · Jan 10, 2015 at 3:37 pm

  • Copy link

  Looks perfect! Thank you so much for all of your help!!!

• 

  jeremeylduvall · Member · Jan 10, 2015 at 4:25 pm

  • Copy link

  No problem at all! Happy to help. :)