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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: