Recently I've encountered this issue with a client who had side-by-side image and accordion blocks and was encountering the zoom/aspect ratio change issue. It's one I've known about for a while but haven't tried to fix until now as I didn't really have a need to.
Anyhow, it's a few lines of code and quick use of the Inspect tool and you're pretty much set. Just be sure to use block IDs to avoid applying this code site-wide!
No Javascript needed, just pure CSS and about 30 seconds of right clicking and such!
Feel free to ask any questions in the comments below, if you get stuck or want to know a bit more.
=============================================
If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :)
www.kwameand.c...
Interested in more Squarespace tutorials, tips and tricks?
Why not visit the SquareSkills website for more content like this:
www.SquareSkil...
/ squareskills
/ squareskills
If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website:
www.kwameand.co/
/ heykwame
/ kwameand.co
Here's the code used in the video. You can modify the properties to tailor it to match your branding and style - or take it even further.
=============================================
Insert into CSS:
/***********************
* Squareskills.dev
* Fix Side-by-Side Accordion and Image Zoom
*******************************/
//make navigation full-bleed
#BLOCKID .fluid-image-container.sqs-image-content {
height: auto!important;
aspect-ratio: YOURASPECTRATIOHERE;
}
9 сен 2024
