Grid setup for Blog page

• 

  artootrills · Member · May 3, 2016 at 11:32 am

  • Copy link
  • Add topic to favorites

  How can I make these divs appear in a grid-like setup for my company blog page?

  https://wordpress.com/page/artoo.com/1043

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

• 

  artootrills · Member · May 3, 2016 at 11:34 am

  • Copy link

  The correct link to my blog page is here: http://www.artoo.com/blog

• 

  alexjgustafson · Member · May 3, 2016 at 2:34 pm

  • Copy link

  Hi there,

  We spoke in live chat earlier. Try adding this CSS code to your site:

  .page-id-1043 .display-posts-listing{
  	display: flex;    
      flex-wrap: wrap;
      align-content: space-around;
  }
  
  .page-id-1043 .display-posts-listing .listing-item{
      flex: 0 1 25%;
      margin-bottom: 10%;
  }

  To add that code, open your Customizer and choose the CSS panel. Copy and paste this whole code into the text editor there and save the Customizer.

  The result will look like this:
  https://cloudup.com/cJWjY_Di-OQ

  To finish off, maybe also tweak the Display Posts shortcode one last time, add this argument along with your others:

  image_size="thumbnail"

  This will add each post’s featured image as well, not just their links.

  -Alex G.

• 

  artootrills · Member · May 4, 2016 at 5:51 am

  • Copy link

  Thanks Alex, where is the CSS panel. If I add featured images for the blog posts, will this code show the featured images in grid too?

• 

  thesacredpath · Member · May 4, 2016 at 5:45 pm

  • Copy link

  Hi @artootrills, to add custom CSS, you would need the Custom Design or WordPress.com Premium Plan upgrade. Since you have been here since 2010, Custom Design should be available to you in you admin dashboard at Store > Store.

  You can try out and preview custom CSS before you buy as explained here.

  You can choose what size image you wish to display within the shortcode itself. See the Display Posts Shortcode support page for more on the available arguments you can use to control what is and isn’t displayed.