Jump to content

Align Buttons to bottom of Code Block

Recommended Posts

Site URL: https://coyote-impala-89x2.squarespace.com/

pw: mccnc

I am trying to align two buttons to the bottom-right of a code block but there is a little gap. I can't seem to make the image align with Squarespace's grid system as there is a small gap below the image (Image 2). If anyone would know the proper pixel dimensions to fit an image perfectly into the grid system or the custom CSS, it would be greatly appreciated. Thanks

Screen Shot 2022-09-12 at 9.13.10 PM.png

Screen Shot 2022-09-12 at 9.14.24 PM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi! You shouldn't need to use CSS given that you're using Fluid Engine.

Go into the settings for the image and for the button, and in the Design tab, set both to Fill instead of Fit. This will mean that they both take up all the space in the grid and line up. At the moment the image is not filling the grid and therefore is not aligned in the same way as the button.

Let me know if this helps!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

You're right, that won't work for a code block. But you should be able to set the image to fill the <div> and hence the code block and that should fix the bottom alignment. Alternatively finding a way to use an image block with the hover effect might work better.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.