Bug lightbox vertical vs horizontal

Community resources Bugs
1

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.

Для тестов 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

Lightbox issues on touch devices: Webflow still haven't fixed it?
2

Is everyone okay? Does everything work correctly?..

3

Did you look at this topic?

1 Like
4

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

5

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.

6

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

IMG_F18352F1900D-1
IMG_F18352F1900D-11536×2048 1.06 MB

Any tips on where I could go from here?

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.