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 to flex, make sure it takes up the full available height and then add margin-top: auto to oxy-read-more to push/pin it to the bottom.

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.

Thanks to

Alexander Buzmakov