Jump to content

Align 'Read More' buttons in Summary Block

Recommended Posts

[update - I have managed to get it working (hooray) but for some reason, the thumbnail gets hidden... I have no idea why.]

I'm trying to align all the "Read More" buttons/links in a summary bloack to sit at the bottom of the block. I've managed to use flex-box to make the summary blocks all the same size (why this isn't a feature by default I have no idea), and I'm trying to do something similar for the read more buttons but I can't get it to work.

I think the below code is somewhat correct, but I can't figure out how to get it working. 

  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

@beatrizc, I was following one of your blog posts about it, but I can't seem to get it working, perhaps you're able to help?

Screen Shot 2020-04-26 at 8.46.00 pm.png

Edited by nickdjeremiah
Link to comment
  • 3 months later...
  • 1 year later...
  • 1 year later...

Same question! 

https://antongill.squarespace.com/

pw: vopro

/* BLOG READ MORE BUTTON */
a.blog-more-link {
  font-size: 0 !important;
  text-decoration: none !important;
  align-self: flex-end;
}

a.blog-more-link:after {
  content: "Read Now →";
  font-size: 1rem !important;
  background-color: #00FFFF !important;
  padding: 18px 8px 18px 18px;
  border-radius: 25px;
  border: 1px solid #000;
}

a.blog-more-link:hover:after,
a.blog-more-link:active:after {
  background-color: #000 !important; /* Button turns black */
  color: #fff !important; /* Text turns white */
  border-color: #fff !important;
}

 

Link to comment
On 9/2/2023 at 1:17 AM, NadineS said:

Same question! 

https://antongill.squarespace.com/

pw: vopro

/* BLOG READ MORE BUTTON */
a.blog-more-link {
  font-size: 0 !important;
  text-decoration: none !important;
  align-self: flex-end;
}

a.blog-more-link:after {
  content: "Read Now →";
  font-size: 1rem !important;
  background-color: #00FFFF !important;
  padding: 18px 8px 18px 18px;
  border-radius: 25px;
  border: 1px solid #000;
}

a.blog-more-link:hover:after,
a.blog-more-link:active:after {
  background-color: #000 !important; /* Button turns black */
  color: #fff !important; /* Text turns white */
  border-color: #fff !important;
}

 

In your blog page, you need to make all same height by set height, or make all limit to 2 lines

With same height, you can use this CSS code

@media screen and (min-width:992px) {
h1.blog-title {
    min-height: 130px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...

I'm totally stuck on this after going round in circles for a couple of hours trying to get the flex box thing to work. 

I need the 'Read More' links aligned to the bottom of each container so they look consistent across the summary items. 

https://triceratops-tuba-r9bj.squarespace.com/home-1

pw: sunnyside

This is what I am using at the moment after watching some tutorials:

.summary-item {
  border: 0px solid purple;
  display: flex;
  flex-direction: column;
 
}
         

.summary-content {
  border-top: 2px solid darkred;
  padding: 0px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


  .summary-read-more-link {
  font-size:0!important;
    margin-top: auto !important;
    
}

.summary-read-more-link:after {
  font-size:1rem!important;
  border:1px solid darkred;
  content: "Read More →";
  background: #;
  padding: 5px 10px 5px 8px;
}

.summary-read-more-link:hover:after{
  background:darkred !important;    
  color:#fff!important
}

Any help understanding where I am going wrong would be very helpful!

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.