Hello! I was hoping to get some insight into how I can have a gallery with images and hover states scale down responsively. As you can see, at a certain (but still quite wide) desktop break point, the elements will just cut off. For some reason, this is only an issue in the “All Work” tab (the others seem scale down well enough).
I’m pretty new to Webflow, so any help would be hugely appreciated. Thanks!
Here is my site Read-Only: Webflow - Sean's Portfolio
Hi there,
Responsive images in Webflow work by automatically generating different image sizes for optimal loading across devices. When implementing hover states, it’s important to understand that these responsive calculations are based on the image’s default state, not its hover state properties.
To ensure your hover states work correctly with responsive images:
For best results, keep your hover state transformations proportional to maintain the responsive behavior Webflow has calculated.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hey @Sean_Loose,
In the large screen breakpoints, can you try removing the padding from ‘Container 14’ element? That seems to fix the gallery view and I am able to see each cell without it being cut off on the live site.
In the relevant mobile breakpoints, where you see the elements cut off in the Gallery section, you can select “Hero Cell” elements and set the ‘Cell Size’ in the Styling tab (on the right side) to have 1 as Column span instead of the current setting as 2. Doing this seems to scale down the layout and structure it properly to view the cells completely in the stack. Hope this helps.
Oh, that did it! Many thanks!