Align Buttons to bottom of Code Block

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

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!

@Ziggy thanks for the response! It seems I cannot edit a Code Block in that way. When I try to edit it, it only opens up the HTML and there is no Design Tab. Is there a workaround for this issue? Thanks!

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.