Jump to content

Responsive design with overlapping shapes and images

Recommended Posts

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

 

 

 

1.png

2.png

3.png

Edited by WCS
Uploaded better images

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

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

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

Password: sqsp

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

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.

Link to comment
  • 11 months later...
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

 

 

 

1.png

2.png

3.png

@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.

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.