Jump to content

Expanding accordion causes images to zoom in

Go to solution Solved by paul2009,

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
  • Solution
On 10/6/2022 at 8:28 PM, 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 "feature" of the Fluid Engine grid and it is because of the way that the rows must expand to allow the Accordion Block to expand.

One workaround is to adjust the height or position of Blocks. For example, if the Accordion Block is the same height as the Image Block, when the accordion expands, all the grid rows will expand, making the Image Block stretch too.

image.thumb.gif.a7695df76d4bca88337facade2767e8e.gif

However, as shown above, if the Accordion Block is expanded one row below the Image Block, when the accordion expands, this otherwise unoccupied row will expand, leaving the Image Block unaffected.

Another workaround is to set the image to Fit instead of Fill.

image.gif.eaf5a69186f8a83546027c66cc343117.gif

I hope these workarounds help.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009
Updated to accurately represent FE

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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
  • 3 months later...
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.

Link to comment
  • 4 months later...

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

Edited by KwameAndCo
added video explanation

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
  • 1 month later...

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.