How to position the Read More buttons at the bottom of Easy Posts
This tutorial provides the steps to line up the Read More buttons to the bottom of posts for each row of Easy Posts component when using the “Grid – Image w/ Gradient Overlap” or “Grid – Image w/ Rectangle Overlap” preset in Oxygen.
Before:
After:
Method 1 – Using Flexbox
We set the display of oxy-read-more
‘s parent i.e., oxy-post-wrap
flex
margin-top: auto
oxy-read-more
In Easy Posts Template CSS,
change
%%EPID%% .oxy-post-wrap {
background-color: white;
padding: 2em;
margin: 2em;
margin-top: -6em;
z-index: 1;
align-self: stretch;
}
to
%%EPID%% .oxy-post-wrap {
background-color: white;
padding: 2em;
margin: 2em;
margin-top: -6em;
z-index: 1;
align-self: stretch;
flex-grow: 1;
display: flex;
flex-direction: column;
}
and at the end, add
%%EPID%% .oxy-read-more {
margin-top: auto;
align-self: flex-start;
}
This is my preferred method.
You could also replace
flex-grow: 1;
with
height: 100%;
min-height: 1px;
for %%EPID%% .oxy-post-wrap
.
Method 2 – Using Absolute Positioning
For %%EPID%% .oxy-post-wrap
, add
position: relative;
and for %%EPID%% .oxy-read-more
, add
position: absolute;
bottom: 0;
I do not prefer this method since an absolutely positioned element is removed from the document flow and avoid it if possible, like in this situation.