Jump to content

Stick "toghether" two element so that they do not overlap

Go to solution Solved by melody495,

Recommended Posts

Hi

if you see this page: https://oukside.com/workshops/stress-fat-loss-2

(from desktop)

you can see the element on the left that is pinned. The element is formed by two blocks (text + button). At the end of the viewport, you see that the button block "goes up" relative to the text block.

Is it possible to "stick together" (via Squarespace native feature) in a way that at the end of the section, the elements do not overlap? Or there is some workaround for the same?

Link to comment
  • Replies 3
  • Views 575
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

Hi @Oukside I like what you've done with them!

You can try extending the button block to align with the bottom of the text block, so that the bottom of both blocks are on the same row. So that when they reach the bottom of the section, they are moved up together at the same height. Hope this makes sense.

If not already, change the button to "fit" under Design. Let me know how it goes.

image.png.ff422db5cc441a646b36bb9c7809d566.png

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
Posted (edited)

Oooh what a clever solution! Thanks! 🤩 
In fact, it was right there before my eyes, but I was still because I was holding the "Fill" button.

Thanks to your solution, I found another way to keep the button in "fill" mode but still mantain the distance from the bottom border of the text block: I aligned the bottom of the button with the bottom of the text block, then used CSS to "rise" the button inside the text block:

.sqs-block-button-container {
   position: relative;
   bottom: 30px;
}

Since that page is inside a "Portfolio" type of page, and there SQS allows to inject code only to the whole thing (overview page + specific pages), I added the selector .sqs-position-sticky to better target ONLY that type of buttons.

(I write this in case someone else wants to use this solution: maybe it is necessary to specify the element even better; in my case, the structure of the pages will be quite simple and that level of specificity in the CSS is sufficient.)

Edited by Oukside
Link to comment
3 hours ago, Oukside said:

Oooh what a clever solution! Thanks! 🤩 

You are welcome 🙂

3 hours ago, Oukside said:

Since that page is inside a "Portfolio" type of page, and there SQS allows to inject code only to the whole thing (overview page + specific pages), I added the selector .sqs-position-sticky to better target ONLY that type of buttons.

(I write this in case someone else wants to use this solution: maybe it is necessary to specify the element even better; in my case, the structure of the pages will be quite simple and that level of specificity in the CSS is sufficient.)

If you want to be more specific, you can target the block id. There is a very useful browser extension called Squarespace ID Finder.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

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.