Hello guys! We are launching a new site soon, and the site is pretty much ready, but we have an issue on mobile with an accordion. For some reason, on mobile the accordion cuts the content of the accordion as seen below. Here is the site-link: https://roomsense-concept.webflow.io/solution, and read-only link: Webflow - RoomSense
I am able to get a better result when adding a fixed height to the body div, but it is not optimal as some material takes more space and some don’t which causes a lot of extra space below the content.I would like to have it scale automatically based on its content instead of course…
@Support-Luis have you had time to check out this issue yet? Thanks!
Hey @marcus.paivio! I am testing something at the moment! I’ll get back to you
1 Like
Alrighty, thanks!
I had the same issue and found that adding padding-bottom of 2rem to the .fs_accordion_body class from tablet down seemed to fix it for me.
2 Likes
I tried it to add 2rem padding to the body element, but it did not sadly fix the issue. Still some of the images get cut-off from the bottom. 
Hey @marcus.paivio - think it is because you have a fixed max-height on the .fs_accordion-2_content-2 is-active-accordion class (don’t know if this comes from the is-active-accordion combo class or exists on the base .fs_accordion-2_content-2)
1 Like
Can you show a screenshot? I don’t have any combo-class for the content div. Only for the header-div
The FS Accordion automatically applies a combo class to relevant accordion elements called is-active-accordion. So if you want to style it, you need to create the combo class on the required elements in the designer and add styles. (You can find out more about this from the Accordion Docs and going to section OPTION ACTIVE.
Screenshot below shows the height interference:
And the screenshow below shows the max-height style removed and the image not being cut off:
1 Like
Happy to jump on a call and give you a hand
1 Like
That would be great! I have time now right away, if you have?
Thank you ao much @yogdog for jumping in! 
1 Like
We’re getting there! Will share our progress on here once it’s fixed…or if we can’t fix it! 
1 Like
Hello @Support-Luis,
Sadly we were not able to solve the problem. We were able to make it a bit better with setting a minimum height to the lightbox with the image, but the problem still exists. @yogdog can comment from a more technical perspective if needed.
Thank you @marcus.paivio for getting back to me.
@yogdog if you could please share the details of what you tried and what succeded or failed so I can forward this to the team 
Hi @Support-Luis , I suggested the following options to Marcus:
- On .fs-accordion-body, padding-bottom: 2rem
- On .fs-accordion-content is-active-accordion, min-height: auto
- On the lightbox image, (.full-features_lightbox-image), object-fit:fill, object-position left:50%, top 50%
- On .full-features_lightbox, set a minimum height
The page seems to display fine on Android using Chrome, but doesn’t display correct using Safari on iPhone, so I suggested:
- On .fs-accordion-component, changing the grid align from stretch to top
@marcus.paivio, you could try experimenting further with grid alignment/distribution on the accordion component as I have had some problems with this aspect of grids in general on Safari in the past. Or maybe try changing the .section_full-features position from relative to static?