Jump to content

Custom Blog Layout - move Read More button

Go to solution Solved by Beyondspace,

Recommended Posts

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.

Screenshot 2023-02-02 at 14.20.49.png

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.

Screenshot 2023-02-02 at 14.16.21.png

Any way to achieve what I want?

Thanks.

Edited by cynanc
Link to comment
  • Solution
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.

Screenshot 2023-02-02 at 14.20.49.png

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.

Screenshot 2023-02-02 at 14.16.21.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.6000518a1fa9f502f764e0209d0812db.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.