Streaming live at 10am (PST)

Bug lightbox vertical vs horizontal

Hello.

Who solved the problem with the glitch of displaying pictures in a lightbox on mobile devices.

If you open the site in the vertical position of the device, then expand it horizontally, then return it to the vertical position, the pop-up window with the image from the lightbox goes to the right, you have to reload the page and do not carefully turn the phone into a horizontal position.

https://new-real-ink.webflow.io/for-test/ for example, at the bottom of the gallery of several images, try opening the phone in the picture in the vertical position, then flip the phone horizontally, then back.

https://preview.webflow.com/preview/new-real-ink?utm_medium=preview_link&utm_source=designer&utm_content=new-real-ink&preview=90d67c2888f083d8c5f0f8f175cb1fed&pageId=5d6df7e3b8496ec3379a9c36&mode=preview


Is everyone okay? Does everything work correctly?..

Did you look at this topic?

1 Like

I have the same issue! And I don’t know how to fix it

I created a fix for this issue. Tested it in a local electronics store, on multiple android tablets, phones and also iphone/ipads/macbooks.

Try this:
add this to the page where you’re having a lightbox in the head settings:

<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.

This seems to work really well, thank you so much.
However, in Portrait on a 5th gen iPad I now get the attached result:

Any tips on where I could go from here?