Jump to content

Bottom aligning a button on a poster block in 7.1

Recommended Posts

19 hours ago, kf_creative said:

Site URL: https://wolf-green-e5sr.squarespace.com/join

Hi I have four image poster blocks and I am trying to drop the buttons from the center of the block down near the bottom. of the poster block. This is for a clients site so I was wondering if someone can help me 

Screen Shot 2021-09-27 at 3.24.19 PM.png

Screen Shot 2021-09-27 at 3.33.56 PM.png

Have you tried in Home > Pages > Edit > Image Block yet? Get a reference from my below video

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thats exactly what I did, but what I need to do is bottom align the button to the image. I tried to figure it out with CSS but in squarespace, I dont know what they use as a  div class to identify the image poster block. I figured it out be something like adding a css to override the position. I am also just learning CSS. Maybe something like this?

.image-block-button {

        margin-top: 500px !important;

}

 

Link to comment
7 minutes ago, kf_creative said:

Thats exactly what I did, but what I need to do is bottom align the button to the image. I tried to figure it out with CSS but in squarespace, I dont know what they use as a  div class to identify the image poster block. I figured it out be something like adding a css to override the position. I am also just learning CSS. Maybe something like this?

.image-block-button {

        margin-top: 500px !important;

}

 

I 've taken a look on your site. The button is under the description, not inside the image. Have you added any code/ Custom Css yet?

image.png.3e0db4f5900255e79a5e2f61f6d3b555.png

If possible, can you remove your configuration related to this section before?

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 hours ago, kf_creative said:

and no css has been added yet. I have to leave the page the way it is for the time being as this page will be launching tomorrow, but the css integration will be added at a further date

I found that in your last image, we could reposition as you require with the following Css

#block-yui_3_17_2_1_1632771547750_53624 .image-button-inner {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}

Can you set the other image by the same way with this one? In that way, we config for all button more easily

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Here is the result for last image

image.png.658a38e266f0368146530feb79a6ad36.png

In addition, you can move the button up or down by changing the bottom value in Css

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...

Yeah this works! I managed to find a really good squarespace tool that tells you the id number of each feature and if i replace the id number it works for all of them. 

 

My only question left is if you have a donate button, you can't attach it to a regular button and still get the functionality of donating denominations. Is there a way to do that? 

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.