Hover interaction not working the same on published site as designer preview

Design help Custom code
#1

Hello everyone,

I’ve got a CMS splide slider on my landing page for a blog/latest news section. The part I’m having problems with is the hover interaction I’ve set for each collection item. When hovering, a read article link is supposed to appear with an arrow icon. The height is set to 0px in the interaction then auto to appear. It works perfectly in the designer preview however on the published site, the arrow icon is much bigger than what I’ve set and centered in the middle of the item? Tried so many things but nothing is working. Can only think that there’s something with code possibly? I’ve added screenshots of the hover effect and the read-only link. Any help would be greatly appreciated.

Screen Shot 2023-01-25 at 9.51.15 PM
Screen Shot 2023-01-25 at 9.51.15 PM1920×968 81.5 KB

Screen Shot 2023-01-25 at 9.51.23 PM
Screen Shot 2023-01-25 at 9.51.23 PM1920×1029 91.8 KB

Here is my site Read-Only: Webflow - Valetta Pay

#2

Try setting flex children to no-wrap to the blog-link-wrapper class, and adding a max-height and max-width to the arrow icon

#3

Perfect, that fixed it. It wasn’t working till I added the max width on the icon. Thank you so much!