Adding an extra button link to image block

Site URL: https://clavichord-dahlia-ke4t.squarespace.com/

Hi, I am trying to see if it is possible to code in an extra button (making there be two) on the overlap image card? Thanks!

What is access password?

Was this ever resolved? I'm looking to do the same thing to an Image Card design. I would like to have an RSVP and Donation button in this block. Can be stacked or side-by side.

https://berkshireic-cms.squarespace.com/special-event 

password: BIC2021

I've adjusted the block so that no image appears, I'm using this as a content block styled with a left-hand pipe.

@kcasey

The url doesn't exist.

oof, sorry @creedon ... the actual url is https://berkshireic-cms.squarespace.com/one-world-celebration-2021

If there is a cleaner solution for this, I'd be thrilled. I basically want a content block with text and multi-button capability that has that green line running the height of the box on the left-hand side. This is what I came up with and it works, but it's limited to 1 button. 

@kcasey

I can't speak to this being cleaner. Just a different way to achieve similar end results.

This is just text blocks and button blocks and a little CSS to add the green border to the right of the big text block.

hi @creedon YES! This looks great and is much cleaner than mine! Your end result is a single block, mine is each button section in it's own block as this was the only way I could do it.  Please, how did you do this?

Questions: does this solution keep the green bar to the left on mobile as well? When I tried a separator pipe--my first attempt at this look--it needed to be a set height which created a long scroll on mobile. 

Thank you!

@kcasey

Without more CSS it looks like this.

I didn't run through all the permutations.

Off the top of my head I'm thinking there are two ways to go. The quick and easy would be to add some CSS to change the location of the pipe from left to top on mobile. Or even drop the pipe on mobile. Then there is a more complex way to go that would be duplicate the button section but change it to a horizontal layout. Then with CSS turn the buttons sections on and off depending if on desktop or mobile.

If you want to proceed I can try to give you some tips for getting the effect started. You might want to set up a test page in the Not Linked area to practice on. You could give us that URL and we can see your progress.

Hi @creedon, this actually looks great.!

What I meant was that one of the suggestions I tried first was to simply add a pipe separator of specified height between the two blocks. The tall green line looked fine on desktop, but on mobile it stacked between the two blocks leaving a tall 80 pixel green line you had to scroll past. Which made perfect sense when I saw it in action, but clearly wasn't going to be a good user experience. 

I would like to proceed with this effect you have here. I didn't even think of dropping the line on mobile, which is a great idea as well, but I'd like to try this one first. I can set up a test page and share that when I've tried it out.

I really appreciate your time and help here. Thank you!