Streaming live at 10am (PST)

Rotation problem with lightbox galleries

Hello, Argogiant’s wife here.

I have made a solution to the problem, that only uses CSS media queries, no need to reload the page (that’s a weird suggestion and also really breaks the user experience, hence the need to open the image again).

Here is the CSS styling for mobile and tablets (also includes the ipad mini and ipad pro newest version)

I personally don’t really understand why Webflow hasn’t picked up this issue yet, because you can also see the problem in the chrome dev tools. It is also a basic Webflow feature that isn’t working like it should be working…

I’ve tested this solution in our electronicsstore nearby, on ipad tablets, iphones, android phones and tablets.

You can do some tweaking to the image height of landscape if you would like the image to be bigger.

<style>
/* mobile  portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 812px)
  and (orientation: portrait) {
  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 86vh !important;
    width:auto !important;
  }
  .w-lightbox-image{
    max-height:100vh !important;
    max-width:100% !important;
  }
}

/* mobile landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 812px)
  and (orientation: landscape) {
    .w-lightbox-group .w-lightbox-image{
      height:70vh!important;
    }

    .w-lightbox-view{
      width:100% !important;
      display:flex !important;
      justify-content:center !important
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
     height: 86vh !important;
  }

  .w-lightbox-image{
    max-height:100vh !important;
    max-width:100% !important;
  }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .w-lightbox-group .w-lightbox-image{
    height:70vh inherit !important;
  }

  .w-lightbox-view{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }
}



/* ----------- iPad Pro -----------
*/

/* Portrait */
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
     height: 86vh !important;
     width:auto !important;
  }

  .w-lightbox-image{
    max-height:100vh !important;
    display:inline-block !important;
    max-width:calc(100% - 130px) !important;
    /* calculate the width, remove the width
    from the navigation arrows,
    so the arrows are still visible */
  }

}

/* Landscape */
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
  .w-lightbox-group .w-lightbox-image{
    height:70vh !important;
  }

  .w-lightbox-view{
    width:100% !important;
    display:flex !important;
    justify-content:center !important
  }
}

/* ipad mini landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
  .w-lightbox-group .w-lightbox-image{
    height:75vh !important;
  }

  .w-lightbox-view{
    width:100% !important;
    display:flex !important;
    justify-content:center !important
  }
}

/* tablet ipad  1-5 landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  .w-lightbox-group .w-lightbox-image{
    height: 73vh !important;
  }

  .w-lightbox-view{
    width:100% !important;
    display:flex !important;
    justify-content:center !important
  }
}

/* tablet ipad  1-5 portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
      height: 86vh !important;
      width:auto !important;
  }
  .w-lightbox-image{
    max-height:100vh !important;
    display:inline-block !important;
    max-width:calc(100% - 130px) !important;
  }
}
</style>

Paste this code into the head of your page.

4 Likes

This is really helpfull! Big thanks!

1 Like

You are amazing! Thank you so much for putting this together :raised_hands: :raised_hands: :raised_hands:

1 Like

Still no timeline or webflow staff ?? The lightbox is a standard webflow feature that we pay for?? @Brando would like an update and a timeline after one year of sillence