Expanding accordion causes images to zoom in

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!

It looks like a bug. You try reporting this to Squarespace Customer Care.

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. 

got it, thanks you guys!

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?

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)

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. 

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)

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*/
}

On 10/29/2022 at 5:59 PM, Faithsylv said:

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*/
}

 

This worked for me as well, so thank you! For those of us that aren't particularly techy, here is how to find the block ID for the image you're wanting to prevent from stretching. Make sure it is the ID that starts with "block". Then, to enter the CSS, go to Design > Custom CSS and copy/paste the code above, replacing the "block-71dg10454aa196265419" with your block ID. You can do this with multiple images if you move to a new line in the CSS and repeat the process for each block ID.

Anyone get any luck on this bug?