Responsive design with overlapping shapes and images

I'm working on a site with overlapping images and shapes ... and I'm running into responsive issues where the design deconstructs.

Question 1: Is there a way to get 2 elements to "lock" or "group" together?

In this case, the square image and interlocking circle image. I know I can create the image separately and export it as as a png but I'd love to be able to do this on the platform itself. 

-----------

Question 2: Is there a way to get the triangle shape (image) to not inset with smaller screens? (Stay locked to the right / top / bottom).

I know one solution would to have it be a background image but I'd like to be able to set this style per section and not have to deal with it every getting cut off, having the text overlap, etc. 

-----------

Image 1: Design on standard screen (desired look)

Image 2: Design on smaller screen -- triangle starts to float

Image 3: Design on larger screen -- Circles move away from square image

-----------

Site: https://olive-finch-95hd.squarespace.com/help

Password: sqsp

Site URL?

@creedon Oops! I thought the url would show when I created the topic. 

Site: https://olive-finch-95hd.squarespace.com/help

Password: sqsp

To group or lock two overlapping elements in Squarespace, you can use the Spacer Block to hold the two elements together. Here's how:

Add a Spacer Block to the page where the two elements overlap.
Adjust the Spacer Block's height to match the height of the two overlapping elements.
Drag and drop the two overlapping elements onto the Spacer Block.
Use the Position option in the Style Editor to position the Spacer Block and the two elements as desired.
Note that this technique may not work in all cases, especially if the overlapping elements have different positions or animations.

Answer 2:
To prevent the triangle shape from being cut off on smaller screens, you can use CSS to position it relative to the section container. Here's how:

Open the Page Settings for the page where the triangle shape appears.
Go to the Advanced tab and click on the CSS Editor.
Add the following code to the CSS Editor:
css
Copy code
#block-604810f64e8e6a7e25eb7535 .content-wrapper {
    position: relative;
}

#block-604810f64e8e6a7e25eb7535 .triangle-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
Note that the code above assumes that the triangle image is inside a section with the ID block-604810f64e8e6a7e25eb7535. You may need to adjust the section ID and class names to match your specific design.

Also, keep in mind that this technique may cause the triangle image to overlap with other content on smaller screens, so you may need to adjust the positioning or size of the image accordingly.

On 3/20/2023 at 4:48 PM, WCS said:

I'm working on a site with overlapping images and shapes ... and I'm running into responsive issues where the design deconstructs.

Question 1: Is there a way to get 2 elements to "lock" or "group" together?

In this case, the square image and interlocking circle image. I know I can create the image separately and export it as as a png but I'd love to be able to do this on the platform itself. 

-----------

Question 2: Is there a way to get the triangle shape (image) to not inset with smaller screens? (Stay locked to the right / top / bottom).

I know one solution would to have it be a background image but I'd like to be able to set this style per section and not have to deal with it every getting cut off, having the text overlap, etc. 

-----------

Image 1: Design on standard screen (desired look)

Image 2: Design on smaller screen -- triangle starts to float

Image 3: Design on larger screen -- Circles move away from square image

-----------

Site: https://olive-finch-95hd.squarespace.com/help

Password: sqsp

 

 

 

@WCS Meghan, did you ever find or devise a solution for this? I'd love to be able to group blocks/elements (just like everyone apparently would) but am having zero success in figuring out how.