How to change radius on blog post container, add padding to text, push the "read more" button to bottom, and change colour of "read more" font?

Site URL: https://designbycaitie.ca/blog

Hey there,

There are a few more changes I'd like to make to my blog collection page but can't figure out how to do them:

1. Add a 10px radius to the top corners of the container. (It worked for the bottom but didn't apply to the top.)

2. Add padding to the left and right sides of the text. (I thought I got it by targeting ".blog-basic-grid--text", but nothing happened the first few tries, and the last few it only worked on the left side and pushed the right side text out of the container, so I deleted my attempt.)

3. Push the "Read More" link down to (near) the bottom of the containers, so it's equally as far from the bottom as from the side (once the padding is in place).

4. Change the "Read More" link font colour to #606060.

Thank you in advance!

My testing

Amazing, thanks so much! Any ideas on creating an "absolute" position for the Read More button near the bottom of the container?

On 10/21/2022 at 11:39 PM, KatieQ said:

Amazing, thanks so much! Any ideas on creating an "absolute" position for the Read More button near the bottom of the container?

Try adding bottom attribute

.blog-more-link {
    border: 1px solid grey;
    padding: 0.4rem !important;
    margin-top: 0.5rem;
    border-radius: 10px;
    bottom: -5px;
    position: relative;
}