How to create a bespoke bordered text with overlapping image and button

Hello,

The first attached image shows how the services section on my homepage is currently looking. I would like it to look similar to the second attached image, only with the addition of the circular images that sit on top of the top of each box, and align centrally. 

I would like my three services boxes to be the same height and for the link to sit on top of the bottom of the box. I've tried to do this myself but I can't get the buttons to align centrally, or with each other.

password: !(cX3Ly@$323cC(

Thanks!

Can you share the website URL? 

@Ziggy Sorry I did when I submitted the question, or I thought I had. 

https://bamboo-rabbit-99gt.squarespace.com/config/

19 minutes ago, Leanne_M said:

Sorry I did when I submitted the question, or I thought I had. 

You did, but that doesn't get passed through with the question, design flaw on the forum, not your fault.

This feels like it should be possible with FE, but the issues with 3 columns of 7 with 2 gap columns doesn't work evenly on the 24-wide grid, and you're going to have a problem with getting the overlapping to work nicely on the buttons as you really want the buttons half way, I'll have a quick play on one of my test website and see if I can make it work. The alternative would be to use a list section and code to adjust it.

I've made this in a grid editor section, does that look more like what you want (minus styling)?

https://quillfish-tangerine-4c2a.squarespace.com/test-layout?password=testing123

PW: testing123

Thoughts?

@Ziggy Yes that is pretty much how I want it! Is it possible to increase the content space in CSS to extend it beyond the 24-wide grid, for this section? It would be better if the boxes could be wider.

Thank you for helping me with this!

You could alter the width of that section with this CSS:

#sectionID {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

Or you could make each piece of content 8 columns wide and increase the column grid spacing to give you more padding between them, like this:

@Ziggy I've just tried that CSS to adjust the section width but unfortunately it didn't change anything. Maybe I've got another bit of CSS that is overriding it.

With your help I've managed to get the boxes the same size now. Is is possible to have the buttons aligning centrally on the bottom border? They're off centre at the moment.

Also, (and this may be a weird glitch) but when I try and move the content I'm finding that the buttons are jumping around. I'm trying to reposition the content in mobile view and the buttons won't stay in position. Have you experienced this?

Thanks!

@Ziggy I did add the section but it didn't make a difference for me but it's working now! Thank you.

Thank you for help (and quick replies!) it's looking much better now.

1 hour ago, Leanne_M said:

Thank you for help (and quick replies!) it's looking much better now.

I agree, it looks great! 

You do have a problem with the tablet view on that section, do you have a min-width set in Custom CSS?

35 minutes ago, Ziggy said:

I agree, it looks great! 

You do have a problem with the tablet view on that section, do you have a min-width set in Custom CSS?

Oh I haven't looked at the responsiveness yet other than seeing what it looks like in mobile view. I'm working towards getting the site pretty finished and before I tweak the CSS for different sizes.

@Ziggy If I could tag another slightly related question onto this one...

On my About page I have another three column section that I'd like to adjust the width of to match the section you helped me with on my Homepage. I've tried to apply the same code you gave me for this section but it's not working. I'm guessing it's something to do with this section being a "Simple List" and there's code already in use that is overriding the CSS I'm trying to apply.

1 minute ago, Leanne_M said:

"Simple List"

If it's a simple list then you should be able to adjust the width with this Custom CSS:

section[data-section-id="63fe2ec0bd372c1f5ac06ca5"] .user-items-list-simple[data-layout-width="inset"] {
    max-width: 100vw;
}

I'm not sure if I picked the correct section to target, but you can change the section ID.

That's worked perfectly! Thank you 😀

14 minutes ago, Leanne_M said:

That's worked perfectly! Thank you 😀

Wonderful!