I created a portfolio on Webflow. On my homepage, I have a “Recent Projects” section designed as a carousel/accordion. The hovered project expands to a 16:9 ratio, while the inactive projects shrink to take up the remaining width of the screen.
I would like all elements to have the same height as the active element. The carousel works perfectly on Google Chrome, but not on Safari.
Could you help me figure out how to get the same rendering on Safari as on Chrome?
To achieve equal heights in your responsive layout, you can use Webflow’s flexbox properties. Here’s how to implement it:
Set your parent container’s display to “Flex” in the style panel. Then set “Align Items” to “Stretch” - this will automatically make all child elements expand to match the height of the tallest element. For best results, ensure your child elements don’t have fixed heights set.
For carousel or accordion components, you may need additional settings:
For carousels, apply these flex settings to the slide container
For accordions, apply flex properties to the accordion item wrapper
You can also use Grid layout as an alternative, setting equal height rows using “Grid Template Rows” with “1fr” units.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Wait, I added “Auto” height to the element. I didn’t not remove it. You originally had this field blank.
It appears correctly in Safari for me now.
Edit: I see that the images shrink only after hovering out. And that you’re using custom code for this functionality. The code might need to be reworked to accommodate Safari.
