javascripthtmlcsslightboxfeatherlight.js

Responsive featherlight iframes width

I'm using the featherlight lightbox to open iframes with different widths, please see the 1st 2 links on the fiddle below:

http://jsfiddle.net/sm123456/d5Lvw1rs/

The issue is that I seem I cant seem to be able to make the iframe responsive ie. when the browser window goes below the iframe width, the iframe should switch to 100%.

I've tried the code below which should work great, but doesn't, even when removing data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".

data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"

Any assistance would be very much appreciated!

Solution

  • After reading the documentation, I found out you can add a custom class to the lightbox using the data-featherlight-variant="classname" attribute. Using this attribute, I added a different class to both the 800px and the 1350px one. Using that class, I applied the style. Check the JSFiddle to see it in action.

    For the 800px width one:

    data-featherlight-variant="custom-class-800"

    @media only screen and (max-width: 800px) {
  .custom-class-800,
  .custom-class-800 .featherlight-content{
    width: 100%;
  }
  .custom-class-800 .featherlight-content .featherlight-inner {
    margin: 0 auto;
  }
}

    For the 1350px width one:

    data-featherlight-variant="custom-class-1350"

    @media only screen and (max-width: 1350px) {
  .custom-class-1350,
  .custom-class-1350 .featherlight-content {
    width: 100%;
    margin: 0;
  }
}

    JS Fiddle