Jump to content

Expanding accordion causes images to zoom in

Recommended Posts

Site URL: https://bobenna.squarespace.com/stories

I have an accordion block positioned to the right of an image. When I expand the accordion, the image zooms in, even though the blocks aren't overlapping and don't seem like they should affect each other. I've attached 2 screenshots of the expanded/non expanded accordion. As you can see, it also increases the height of the image. I don't have this problem when the accordion is above the image, and not to the side, but I'd prefer it be on the side. 

Anyone know why this might be, and how to fix? Appreciate the help!

forum help 1.PNG

forum help 2.PNG

Link to comment
14 hours ago, kennakb said:

I have an accordion block positioned to the right of an image. When I expand the accordion, the image zooms in

This is a known bug with Accordion Blocks on Fluid Engine sections that I first reported to Squarespace on 24 April 2022. When the accordion expands, the grid row expands and causing other adjacent elements to be affected.

I recommend that you contact Squarespace Customer Care to add your voice to the existing reports of this issue. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
23 hours ago, charlineca said:

Site URL: https://studiocote.co/about

Hi, my About page (pw: cote2022) has an image and an accordion that stand in no relation. However, when I "open" the accordion, the photo somehow zooms in? Can someone help me get rid of this at all?

You can consider recreating this section with Classic Editor (When you add a section >> Scroll down & Choose Classic)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/15/2022 at 10:01 AM, tuanphan said:

You can consider recreating this section with Classic Editor (When you add a section >> Scroll down & Choose Classic)

Is there any way to fix this on the liquid editor? I don't really want to recreate it in the classic editor as then the spacing is too far away from each other. 

Link to comment
On 10/17/2022 at 3:39 PM, charlineca said:

Is there any way to fix this on the liquid editor? I don't really want to recreate it in the classic editor as then the spacing is too far away from each other. 

Try Adding them in 2 rows, then we will use CSS code to move accordion align with image.

(You can duplicate section, then we will test code on this)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

This worked for me - if you select the image block that is zooming and set a fixed height, the image doesn't change as you expand the accordion. The whitespace of the section still expands below the accordion but it doesn't look nearly as bad as the image zoom!

It will prevent dynamic image sizing for responsiveness, so be sure to use media queries to change the height of the image in mobile / tablet if needed.

#block-71dg10454aa196265419 {
  height: 700px;  /*experiment with correct height here*/
}

 

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.