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.

got it, thanks you guys!

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/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?

Potential Fix for anyone still working on this

I've just had to deal with this for a client. After having no love I've come to the following solution (video should be uploaded in a few minutes):

I think it works pretty well.

Open up the image with your inspect tool, hover over the src URL to see the height/width (e.g. 500 x 677) and use that as the aspect ratio in the below.

/* Kwame's Image + Accordion Zoom Fix */
#BLOCKID .fluid-image-container.sqs-image-content {
  aspect-ratio: IMAGEASPECTRATIOHERE !important;
}

Let me know how it works for you

I notified Squarespace of this issue and they said they are aware of it , but have no intention of fixing it. I found that if I set the image to "fit" instead of fill, and then aligned it vertically that it solved the issue.