Display post shortcode alignment help

• 

  rodrilau · Member · Apr 27, 2017 at 3:56 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am using the display post shortcode on my homepage to create a recent blog post section. The posts are lining up in a vertical column and I would like to have them in a horizontal line, with the words under the corresponding image.

  I am using the lodestar theme.

  Any help is greatly appreciated.

  Thanks,
  Laura

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

• 

  thesacredpath · Member · Apr 28, 2017 at 5:29 am

  • Copy link

  Hi Laura, this too a bit of doing, but add the following to the very bottom of your custom CSS and see what you think.

  .display-posts-listing .listing-item {
  	margin-bottom: 40px
  }
  .display-posts-listing .title {
  	width: 100% !important;
  	display: flex;
  	font-size: 120%;
  	font-weight: bold;
  	margin-bottom: 10px;
  }
  .display-posts-listing .excerpt-dash {
  	display: none;
  }
  .display-posts-listing .listing-item img {
  	width: 100%;
  	max-width: auto !important;
  }
  .display-posts-listing .alignleft {
  	float: none;
  }
  @media screen and (min-width: 768px) {
  .display-posts-listing .listing-item {
  	max-width: 30%;
  	display: inline-block;
  	margin-right: 20px;
  }
  .display-posts-listing .listing-item img {
  	width: 100% !important;
  	max-width: auto !important;
  }
  .display-posts-listing .listing-item .title {
  	display: block !important;
  }
  .display-posts-listing {
  	display: inline-flex;
  }
  }

  I’ve used a Media Query to allow the design to return to a single column at at screens/window widths narrower than 768px. I did do a bit of restyling for the narrower screens and took the images full width in a single column.

• 

  rodrilau · Member · Apr 29, 2017 at 4:01 pm

  • Copy link

  Thanks, that worked great. The only other thing is that after adding the css the 3 blog posts as a grouping are not centered to the title “The Latest on the blog”. Is there a way to fix that?

  Thanks!

• 

  thesacredpath · Member · May 2, 2017 at 4:01 pm

  • Copy link

  Hi, add this to the 768px media query, right before the ending curly bracket and see what you think.

  .display-posts-listing .listing-item, .display-posts-listing .listing-item a {
  	margin-right: auto;
  	margin-left: auto;
  }