Archived topic
Blog page button and item alignment
5 replies · Started by View on IT on April 7, 2020
Hello support,
On our GeneratePress website we have a blog page published. The blog items are showing, but we don't really like the lay-out. We want to show the image, title, excerpt and read-more-button neatly alligned to each other, but this doesn't seem to be possible with the default theme settings.
Would it be possible to vertically align these items to each other using the theme options, or some other styling?
Please let me know, thanks!
With kind regards,
View on IT
Hi there,
try adding this CSS:
.generate-columns .inside-article,
.generate-columns .entry-summary {
display: flex;
flex-direction: column;
}
.generate-columns .entry-header {
margin-bottom: 1em;
}
.generate-columns .entry-summary {
margin-top: auto !important;
}
.generate-columns .entry-summary > p:first-child {
margin-bottom: auto;
}
.generate-columns .read-more-container {
margin-top: 1em;
}Hi David,
Thanks for your quick reply! This CSS is adding some great styling already, but it's still not 100% perfect.
The summary is now aligned to the bottom of the column. I'd like to vertically align this to the top, and horizontally align the buttons with each other.
Would that be possible too?
With kind regards,
View on IT
Change this CSS:
.generate-columns .entry-summary {
margin-top: auto !important;
}for:
.generate-columns .entry-summary {
flex: 1;
}Works great, thanks!
You're welcome
