Responsive Modal With Images Not Responsive

Hey jmessenger919,

In the current iteration of Easy Modal, they modal size drop down is not very intuitive.

While you can “select” Responsive, it is not actually a size. It is a heading. Every size below that: medium, nano, etc. is responsive. Responsive in the drop down is a heading to describe all the sizes below it, not an actual size itself.

This non-intuitiveness is addressed in version 3.0 by making this much more clear to the user. Look for 3.0 soon.

Hope this clears things up a bit. Let me know if this solved your problem.

Thanks!

Hey waltmesser,

Thanks for the prompt response. I appreciate the clarity.
However, after selecting “Nano” – I still have the weird effect when resizing the screen. It looks great on mobile portrait , but not landscape. Looks great on Wide Desktops but not Small tablet landscape (800×600). It becomes super tiny. How can I make this work across all devices?

Thanks!

– jmessenger919

If I go bigger than “Nano” – it appears too wide with extra white space on either side of the image.

Actually – oddly enough, just setting it to “Responsive” works for all devices.

jmessenger919,

Strange. I believe, when selecting Responsive, even though it is not an actual setting, simply sets the modal size to the default modal size (as if you did not select any size at all), although to be quite frank, I’m not sure what exactly that default is. I know, though, that it should be one of the sizes in the drop down, just not sure which one.

I’m going to have the Lead Dev take a closer look at this later today.

Thanks for your report.

Did you try all the different sizes and experiment with it, or just the couple you mentioned previously?

I tried everything from X-Large to Nano trying to find the perfect width for my image (they average 481px wide for the modal). The appearance that was acceptable for my situation (at least in desktop view) was “Nano.” However, as I stated above, it proved hard to view on smaller devices.

Anyway, what I’ve noticed is that even though I can save with the Size set to “Responsive,” after the page refreshes, it appears that “Non-Responsive” is selected. This is stranger now that I have affirmed that it is in fact responsive under this setting. Hmmm…

Thanks!

-jmessenger919

After having a quick chat with the Lead Dev, here’s a couple of clarifications:

1) Modals do not dynamically resize. In other words, if you’re testing responsiveness functionality, you don’t do it by simply resizing the window while the popup is open.

You would first select your size for the modal, resize you browser window to desired test size, then refresh the page, then open the modal by clicking the button (or image, link, etc.).

I’m not sure exactly what your steps were, but doing it this way is the proper way to test responsiveness for modals.

2) This is not a bug/break, the fact is, it’s simply not possible to dynamically resize modals (like you see in some websites) because things start getting really weird, in layman’s terms.

Last thing, there is no reason for a user to open a popup, and then resize their screen. If you’re worried about how the modal behaves in this circumstance, then you’re focusing on something that will never happen, unless by accident on the user side (maybe they accidentally hit the button that makes windows smaller?) Even then, it might look a little weird, but the functionality will obviously still work, and it’s not going to break anything.

Hope this helps!

2) This is not a bug/break, the fact is, it’s simply not possible to dynamically resize modals (like you see in some websites) because things start getting really weird, in layman’s terms.

Edit: Just noticed this reads as if other websites dynamically resize modals. This is not what I meant.

I meant: while some websites, as a whole, are designed to be dynamically responsive (headers, footers, menus, etc.), this kind of behavior is not possible with modals and popups (without weird things happening).

Sorry if that was confusing, or gave anyone the wrong impression.

Just to help clarify, positioning is not setup to constantly reposition the modal on the window size changes. For instance, the modal will when changing browser sizes resize appropriately, but its position relative to the edge of the screen will not change without first closing the modal and reopening it which will reposition it using the settings defined in its settings.

This will likely result in the modal being positioned to far right if you are resizing browser smaller, or to far left if you make it larger.