Rotation problem with lightbox galleries

Community resources Bugs
22

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.

5 Likes
23

This is really helpfull! Big thanks!

1 Like
24

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

1 Like
25

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

26

Um. Yeah.

@argogiant - you are a lucky man.

@mistercreate @cyberdave @Brando you would be LUCKY to have this individual as a lead developer, manger, or queen of Webflow’s devop realm - yeah, queen sounds right.

Seriously - a year and no update on an issue that should not be an issue? Not instilling this user with a load of confidence.

1 Like
27

@epicurious_fox

Thank you for your compliments. It is a shame indeed that the problem itself is not dealt with by the team itself. I hope that I can at least help people with my solution.

28

Hello all! I’m Matthew, a Quality Specialist here at Webflow. Last week, an update was pushed to fix the lightbox not adjusting after the orientation changed on handheld devices. I was able to confirm the fix on my devices, but I would appreciate if you all could test it as well to see if the issue is gone for you too. Publish your site and then load it up on a handheld device.

If the problem persists, please let me know. Also providing the device’s name/manufacturer, browser name/version, and a video of the screen if possible will greatly assist in tracking down any remaining bugs.

29

Hi @matthewpmunger - The issue exists albeit i’m experiencing it with my accordion drop-downs. If you rotate the phone whilst the accordion is open in portrait - the text retains the portrait width. Rotating from landscape to portrait causes the text to overflow. Any updates would be much appreciated.

Browser: Safari
Device: Iphone XR

Video of issue: RPReplay_Final1574202876 on Vimeo

ATB,

David

30

Hey @David_Vipond thanks for the report and video!

This will have to be dealt separately from the Lightbox component. The video is a great help. Can you share the read only link too? I’ll write up an issue for this as soon as I can confirm that it is caused by the Dropdown component.

31

Apologies for the long wait! Will do.

DV

32

This doesn’t seem to be fixed on iPhone 8 + on Google Chrome Browser , Vimeo Player

33

Stunning that such a critical issue isn’t fixed after 2 years. i’m a completely new webflow user and already second-guessing if webflow should be my platform. It’s not a minor issue here, it’s a major flaw.