Archived topic
Tweak Example 3 - Entry Meta Style
1 reply · Started by Earl on May 22, 2020
Hello,
I created a blog using Example 3 here - https://docs.generatepress.com/article/entry-meta-style/
It mostly came out as expected - but when I look at it on mobile - the "Last Updated" and "Written by" don't line up exactly - making it look awkward/sloppy on mobile view. I believe it is also not aligned right on desktop - but it's less noticeable.
I tried editing some CSS that created it - but I couldn't seem to find the right place to target - here is the CSS I am using currently:
.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
display: flex;
}.entry-meta {
align-items: center;
justify-content: center;
}.entry-meta .posted-on,
.entry-meta .author-wrap {
flex-direction: column;
font-size: 18px;
font-weight: bold;
padding: 0 27px;
flex: 1;
}.entry-meta .posted-on {
text-align: right;
}.entry-meta .label {
font-size: 14px;
color: #aaa;
margin-bottom: .1em;
}.author img {
width: 80px;
height: 80px;
border-radius: 50%;
vertical-align: middle;
}.single h1.entry-title {
text-align: center;
margin-top: -15px;
margin-bottom: 15px
}
body.single .site.grid-container {
max-width: 850px;
}
How do I correct this?
Hi there,
try fixing the line-height for all the various meta elements with this CSS:
.entry-meta > div > a,
.entry-meta > div > *{
line-height: 1.4;
}