Side by side button alignment on mobile

Site URL: http://www.versefilmprojects.org

Posted this question in another feed but haven't had any answers. Please see above link for screenshots of the issue. I can see others online having the same issue. Help please! 🙂 Thanks in advance 

Site password is: 2021

On 3/26/2021 at 11:38 PM, barrywang said:

Site URL: http://www.versefilmprojects.org

Posted this question in another feed but haven't had any answers. Please see above link for screenshots of the issue. I can see others online having the same issue. Help please! 🙂 Thanks in advance 

Site password is: 2021

There is a trick, I made it on this page, you can replicate it on the others

Communication material — Versefilm Projects

Take advantage of the spacer block, we can target the row that contain the 3 buttons

1. Use this extension to get the spacer block id

Squarespace ID Finder - Chrome Web Store (google.com)

2. In this is case, it is #block-yui_3_17_2_1_1609263043194_75896 , so append this snippet into Design->Custom CSS, repeat for other pages as you wish

#block-yui_3_17_2_1_1609263043194_75896 + .sqs-row {
  display: flex;
}
#block-yui_3_17_2_1_1609263043194_75896 + .sqs-row .sqs-col-4 {
  flex: 0 0 33%;
}

This has worked! Thank you so much for your help. Squarespace said it couldn't be done and their solution was to upload button images in a grid gallery. Which is not a good solution as there's hover hover effects on images.