Read More Buttons and Blog Post Grid

Hi there,

Just wanting to know how I get the blog post grid display to show 3 across instead of only 2?

There isn’t a built in setting to get three posts, instead of two, to display alongside each other. The image you may have seen on the demo site, with the three posts lined up with each, is how the theme looks on larger monitors rather than an average desktop device.

You could, however, use some custom CSS to get three posts lined up on desktop.

To add custom CSS, firstly set up a child theme or activate a custom CSS plugin.

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

@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:before,
	.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;
	}
}

And also how to I get those ‘read more’ buttons as per the display image?

Dyad automatically inserts the read more button when you have enough text on a post that it can’t be fully read directly from the home page. You could try adding more text to your posts or creating a custom excerpt in order for the button to display:

https://codex.www.ads-software.com/Excerpt

Is there a way to feature posts while keeping the same header image. I found when I tagged posts ‘featured’ and enable the featured posts function – I lost the header image?

There isn’t a built in way to have both the header image and the featured post slider on the home page.

You could potentially achieve this with some code but this would require familiarity with HTML and basic PHP. If you’d like to go down that route, please create a child theme and let me know so I can provide further guidance.

Thanks!