Jump to content

Side by side button alignment on mobile

Recommended Posts

  • Replies 2
  • Views 385
  • Created
  • Last Reply
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

image.png.57946dcd53fad5c75e90c40eae997d56.png

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%;
}

  

image.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.