Jump to content

Adding an extra button link to image block

Recommended Posts

  • 6 months later...

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!

Link to comment


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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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!


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.