Three columns featured posts looks weird

• 

  cruisepix · Member · Mar 2, 2017 at 7:07 pm

  • Copy link
  • Add topic to favorites

  I wanted three columns showing thumbnails of posts on my front page and found a css for that. It is just that the half moon shaped thumbnail between the picture and the title and text is not showing the same way in all posts. Can someone tell me whats wrong in the css? I am using Dyad theme and added the css below:

  @media only screen and (min-width: 1200px) {
  	.posts .hentry {
  		width: 33.33333%;
  	}
  
  	.posts .hentry:nth-of-type(4n+3) .entry-inner, .posts .hentry:nth-of-type(4n+4) .entry-inner, .posts .hentry:nth-of-type(4n+3) .edit-link, .posts .hentry:nth-of-type(4n+4) .edit-link {
  		right: 0;
  		left: auto;
  	}
  
  	.posts .hentry:nth-of-type(4n+3) .entry-media, .posts .hentry:nth-of-type(4n+4) .entry-media {
  		float: left;
  	}
  
  	.posts .hentry.has-post-thumbnail:nth-of-type(6n+4) .entry-media,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+5) .entry-media,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+6) .entry-media {
  		float: right;
  	}
  
  	.posts .entry-inner {
  		right: 0;
  	}
  
  	.posts .hentry.has-post-thumbnail:nth-of-type(6n+4) .entry-inner,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+5) .entry-inner,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+6) .entry-inner,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+4) .edit-link,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+5) .edit-link,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+6) .edit-link {
  		left: 0;
  		right: auto;
  	}
  
  	.posts .hentry.has-post-thumbnail:nth-of-type(6n+4) .entry-inner:after,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+5) .entry-inner:after,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+6) .entry-inner:after,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+4) .entry-inner:after,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+5) .entry-inner:before,
  											.posts .hentry.has-post-thumbnail:nth-of-type(6n+6) .entry-inner:before {
  		left: auto;
  		margin-left: 0;
  		margin-right: -25px;
  		right: 0;
  	}
  }
  
  .archive .page-title {
  	display: none;
  }
  
  .nav-links {
  	display: none;
  }

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

• 

  thesacredpath · Member · Mar 3, 2017 at 6:36 pm

  • Copy link

  This is a real challenge on Dyad, and in my experience never comes out entirely right. What I would suggest would be just to hide that icon instead of trying to figure out how to make them align correctly.

  .posts .entry-inner::before, .posts .entry-inner::after {
  	display: none;
  }