WCS Posted March 20, 2023 Share Posted March 20, 2023 (edited) 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 Edited March 21, 2023 by WCS Uploaded better images Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
creedon Posted March 20, 2023 Share Posted March 20, 2023 Site URL? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
WCS Posted March 21, 2023 Author Share Posted March 21, 2023 @creedon Oops! I thought the url would show when I created the topic. Site: https://olive-finch-95hd.squarespace.com/help Password: sqsp Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
Mitchy Posted March 21, 2023 Share Posted March 21, 2023 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
FreewheelStudios Posted February 26 Share Posted February 26 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. KatieMcG and Nicolette 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment