Topic: Add button to container and positioning button in container

YEAR93
May 6, 2024 at 4:19 am

Hello,

I have 2 questions. First I’ve added a section ‘How we help’ on my homepage. With 4 container blocks the first 3 blocks have a background image with a H4 title. I want to add a read more button below this title. View screenshot 1 for current state and screenshot 2 of what I want to achieve. Could you help me?

Second question the 4th container block has an orange donate now button. How can I position this button so it always sticks to the bottom of this container?

Ying

May 6, 2024 at 9:26 am

Hi there,

1. Your current structure is too complicated, it can be done like this:

- Grid 
  -- Container 1
     --- Container 1-1 
       ---- h4 title
       ---- Read more link
  -- Container 2 
     --- Container 2-1 
       ---- h4 title
       ---- Read more link
  -- Container 3 
     --- Container 3-1 
       ---- h4 title
       ---- Read more link
  -- Container 4 
       --- h4 title
       --- paragraph
       --- donate button

2. Select Containers 1, 2, 3, 4, set height to 100%, and set background image and gradient, set display to flex, direction to columns.

3. Select Container 1, and setmin-height to 350px.

4. Select Container 1-1,2-1,3-1, and the donate button, and set margin-top to auto.

YEAR93
May 6, 2024 at 4:18 pm

Hello,

Thank you for your reply. I think I’m almost there, but I’m having trouble aligning the h4 title and “read more” link to the bottom of the container. Additionally, I’ve added a gradient as a pseudo-element, but it’s overlapping the border-radius of 10px. Lastly, I moved the donate button out of its container, but now its width is full-width. I want the width to fit the content, similar to the other buttons on my website.
Ying
May 6, 2024 at 5:22 pm

but I’m having trouble aligning the h4 title and “read more” link to the bottom of the container.

You’ve set container 1-1, 2-1, 3-1 to height: 100%, remove that.

Additionally, I’ve added a gradient as a pseudo-element, but it’s overlapping the border-radius of 10px.

Set the container’s overflow-x and overflow-y to hidden.

Lastly, I moved the donate button out of its container, but now its width is full-width. I want the width to fit the content, similar to the other buttons on my website.

Set the button’s width to fit-content.
YEAR93
May 7, 2024 at 2:49 am

Perfect, it looks and functions exactly how I wanted it to. Thank you very much!
Ying
May 7, 2024 at 9:07 am

You are welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Add button to container and positioning button in container