Streaming live at 10am (PST)

Images Shrink When Inside a Flexbox


#1

I’m encountering an issue that I haven’t been able to find another post about. Essentially, I have a lightbox element that I want to be responsive and that has a play button that sits over it and has an interaction applied to it. Here’s the structure:

36 AM

(this is located on the home page, ignore all other pages, they’re remnants of a template)

In order to get my play button to sit over the lightbox link, I made the div (class: TED Video Div) a flexbox. The issue is that when I switch to tablet view or mobile landscape view, the thumbnail image shrinks inside of the div, even though the width of the image is set to 100%. When I change a style, the image goes back to being the full size, but then after a few seconds, it shrinks back down. It looks normal in desktop or mobile portrait mode though, so this seems like it could be a bug?

Anyone have any advice? Also, if there’s a better way to achieve what I’m looking for, please let me know!

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/2017-annual-report?preview=dac45cb39bc998c306343d8f1353d174


#2

From what I am seeing on the preview link I see that you already fixed the issue right?


#3

I haven’t actually. Right now, if you look at the tablet view, you’ll see that the image isn’t actually the full size of the div that it’s in. If you change a style of the div (can be anything, from my experience), the image will pop back to full size for 5-10 seconds, and then shrink again. Not sure if the behavior occurs in read-only, but that’s how I’ve observed it.


#4

It’s totally occupying the full width of the div for me: https://i.imgur.com/OIGv1R9.png


#5

This is what I see:


#6

This must have been some kind of display bug then. It seems to be working for me now as well. Thanks for checking, everyone.


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.