Jump to content

Prevent responsive shape expanding

Go to solution Solved by Ziggy,

Recommended Posts

Hi guys,

Hoping someone might be able to help me resolve this one please!?

Site URL is: https://fionagallagherathlete.com

On the 'Racing & Results' page, when viewing at desktop, there's a blue shape on the left behind a list of three 'Best Splits'. On the right of the same section there's an Accordion showing Best Results of the last three years.

Frustratingly, when you expand more than the top item of the accordion, the shape on the left stretches unnecessarily, as the right section gets taller.

I've attached a screenshot which might help explain it.

What I want to do is prevent that shape from expanding when all accordion items are expanded.

PW for site is: noodle10

Screenshot 2023-08-18 at 3.07.40 PM.png

Edited by joessqsp
Link to comment

@joessqsp The issue is when the accordion expands on the right side, left side also expands. We can prevent the blue shape from expanding with a fixed height. However, it still won't solve the issue since the blocks on the left side with image and text move down their position when the accordion is expanded. 

As a solution, entire left side can be built using a list, modify the list with custom code to look exactly like your current design, add a blue background to the list using custom code and finally keep the position of the list fixed with custom code. Overall, it'll involve some custom code to prevent the left side from expanding while maintaining the current design layout. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Thanks @Lesum

I don't see 'List' as a block I can add, so I'm guessing I need to use a Code block and need to know how to write the HTML to create the list, and then style it using CSS?

Are you able to help with either/both list building and styling, please?!

Edited by joessqsp
Did more research
Link to comment
  • Solution

@joessqsp Your simplest solution is to give the accordion block space to expand. i.e. make the accordion block the same height as the content on the left. 

(yellow outline is your current block size, drag it taller to match the orange outline)

image.thumb.png.dd2ca27b4c99dc169642a0917f59516b.png

If you combine this with the setting in the accordion block that only allows one section to be open at a time, you won't have this expanding problem. 

Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 hours ago, joessqsp said:

Thanks so much @Ziggy, that works fine. I left the setting to allow for multiple to be expanded at once. It does mean the problem doesn't 100% go away, but giving the accordion more space to expand into has significantly reduced the issue. So thanks for that!

Glad that helped!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.