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:
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
.
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.
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.