Custom Blog Layout - move Read More button

1 hour ago, cynanc said:

Hello!

https://www.skinnies.co.uk/skinnies-blog

I want to move the Read More 'button' so that it sits permanently across the top of the image and the bottom of the blog excerpt - like this.

I'm using the following code to get the effect I have now:

.blog-more-link {
  visibility: hidden;
  position: relative;
  margin-top: 20px !important;
}
.blog-more-link {
  position: absolute;
  bottom: 22%;
  left: 38%;
  padding: 5px;
}
.blog-more-link:before {
  content: "READ MORE";
  visibility: visible;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: 0;
  width: 100px;
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 500;
  font-size: 1em !important;
  font-style: normal;
  text-transform: none;
  color: #fff;
  background-color: #e40c2b;
  line-height: normal;
  border-radius: 15px 0px 15px 0px !important;
  padding: 15px 30px;
} 

But the result is dependent on responsive design (the button moves around) and this isn't giving me the polish I want.

Any way to achieve what I want?

Thanks.

You can try the following code

section[data-section-id="629c8614ba24eb3bd49cb5a5"] .blog-item .blog-basic-grid--text {
  position: relative;
  display: flex;
  flex-direction: column;
}

section[data-section-id="629c8614ba24eb3bd49cb5a5"] .blog-item .blog-basic-grid--text .blog-more-link {
  position: relative;
  display: block;
  bottom: -4rem;
  left: 0;
  flex-grow: 1;
}

Support me by pressing 👍  or marking as solution if this useful for you