joessqsp Posted August 18, 2023 Share Posted August 18, 2023 (edited) 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 Edited August 18, 2023 by joessqsp Link to comment
Lesum Posted August 18, 2023 Share Posted August 18, 2023 @joessqsp Can you please share your site URL? I can take a look. Thanks! 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
joessqsp Posted August 18, 2023 Author Share Posted August 18, 2023 Hi! Thank you - I just edited the original post in this thread with the live URL. Is that the right one or do you need the unique editing URL @Lesum ? Link to comment
Lesum Posted August 18, 2023 Share Posted August 18, 2023 @joessqsp Live URL will work just fine. Looking into your website now. Thanks! 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
Lesum Posted August 18, 2023 Share Posted August 18, 2023 @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
joessqsp Posted August 18, 2023 Author Share Posted August 18, 2023 (edited) 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 August 18, 2023 by joessqsp Did more research Link to comment
Solution Ziggy Posted August 18, 2023 Solution Share Posted August 18, 2023 @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) 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
joessqsp Posted August 21, 2023 Author Share Posted August 21, 2023 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! Thanks @Lesum too! You guys rock. Ziggy 1 Link to comment
Ziggy Posted August 21, 2023 Share Posted August 21, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment