Rotation problem with lightbox galleries

Ok,maybe I’m just being dense here . . . I copied and pasted the code from this post and the original post and used the embed element on the page and I’m not sure that I’m embedding it right - do I need any special tags or semi colons/brackets/any other fun punctuation here? LoL

Share link: https://preview.webflow.com/preview/strickler-2019?utm_source=strickler-2019&preview=507c483d2ca2033787673d4d68a5bd25

Hey @mistercreate! thanks for keeping the conversation going here! I added this in my project settings header:

<script type="text/javascript">

window.onorientationchange = function() { 

    var orientation = window.orientation; 

        switch(orientation) { 

            case 0:

            case 90:

            case -90: window.location.reload(); 

            break; } 

};
  </script>

I added the close script tag because that was messing with my site. However, when placing this, and trying the Lightbox… the result I’m getting is that the Lightbox is closing and not reloading… so I have to tap the image I’m looking at again to get it to work. I don’t sense that this was the result you achieved? It looks like maybe we’re missing something else in the coding?

Thanks again for looking into this for us :slight_smile:

1 Like

Yes, this isn’t the most graceful workaround as it automatically refreshes the page upon mobile device rotation which results in the Lightbox element seeming as if it is closed. Though, the page is completely refreshing upon rotation.

@epicurious_fox - feel free to place the script between the opening and closing script tags

This worked for me like it did for @Bodwa - Not the most graceful work around BBUUUUTTTT, it is WAAAAAAYY better than what was happening before; that said, we [and by we I mean the good people (and by people I mean developers) at Webflow are working to fix it … right?] LoL

@mistercreate and @Bodwa - can’t thank you enough here!

Yup yup, you got it :bowing_man: - this is just a temporary workaround while the engineers are working on the permanent fix, though I don’t yet have a timeline on when it will be available.

1 Like

Is there any update on this issue? :slight_smile:

1 Like

@FakerAgency @Bodwa @mistercreate I have not heard anything since this work-around was given. Saw there was a little activity on this post and was Hoooooooooping that it was the developers at webflow … FIVE … MONTHS … LATER (said in a Sponge Bob Time Lapse style) - any new developments in relation to this issue?

1 Like

I am currently experiencing a format glitch when switching between a lightbox on mobile portrait and landscape. Any thoughts as to why this may be happening?

Thank you!

I am also having a problem when rotating the device.

Seems your almost working longer than a year on the fix for really a big problem in your designer.

and to be honest after a year you should know a timeline for when this bug is fixed?

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

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

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

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

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.

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

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.

Apologies for the long wait! Will do.

DV

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