Is it responsive?

[wearede]

Hi,

Great work on the plugin.

I re-read your description few times, and it looks like this implementation should be responsive. But this is not the case?

In my scenario, I used width 100% on wrapper, but image never gets enlarged or resized down. I see in css height is fixed.

What would you suggest to do in this situation?

[CRTX]

I just went through this same situation.

You can use jQuery's $(window).resize() callback to detect if the browser has been resized.

In the callback you can resize the container along with the images used and then call
$(your_image_container).twentytwenty(); at the end of the callback again to detect the new width of your images. This worked for me.

[wearede]

That's a hacky way though :) I wonder if plugin core could be modified to use percentages instead of fixed width. Purely css based hack I mean. Thanks for the suggestion, I will probably go that way.

[CRTX]

It's the only way to do it because the images also have to be resized along with the content box. Unless you have time to tweak all the custom CSS from the plugin that solution is "good enough" since you're using jQuery for the plugin anyway.

[wearede]

Yes you are absolutely right. I went jquery way 👍

[wearede]

hm, running this: $(your_image_container).twentytwenty(); on the element which had previously twentytwenty active adds unnesseary containers. Basically on each run it recreates divs needed for the plugin, creating a big mess of nested containers. Did yo notice this?

We need a way to destruct plugin and relaunch it.

[CRTX]

Should probably make another thread about that :)

[mhayes]

tl;dr - This is responsive, but it depends on img tags having a max-width set to 100%.

When using this plugin with Foundation this has already been set. The commit above adds this max-width property to all twentytwenty-container instances so it should work without Foundation.

There is a window resize event already in place that adjusts the container height (letting css control the image width):

https://github.com/zurb/twentytwenty/blob/master/js/jquery.twentytwenty.js#L57

Thanks for pointing this out, cheers!

[rflx]

Hi mhayes – nice plugin, thank you for this one!
Just came across with this responsive issue. If I use the plugin out of the box, the image will scale when i'm resizing the browser window but it will be stretched due of a fixed height value in the twentytwenty-container element.

I don't know, but should there be used height: auto; to scale the img height according to the width?

Cheers