Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS issue on responsive fullscreen mode

See original GitHub issue

Hi, as you can see in the following screen shot, in the responsive fullscreen mode, the .widget-container always has height: 100% width: 100% and z-index: 9999 , all other elements in my page are beneath this widget-containe layer, so nothing accessible in this mode.

Thanks in advance for your help.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:6 (2 by maintainers)

Top GitHub Comments

4reactions

shye0000commented, Nov 9, 2017

@mcallegari10 I use this quick fix for the moment.

.widget-container {
  height: auto;
  width: auto;
  .conversation-container {
    width: 370px;
    margin-bottom: 10px;
  }
  .launcher {
    margin-top: 0;
  }
  @media screen and (max-width: 800px) {
    height: auto;
    width: auto;
    .conversation-container {
      height: 100vh;
      width: 100vw;
      margin-bottom: 0;
    }
  }
}

0reactions

servoicecommented, Feb 6, 2021

Just ran into this issue where the widget blocked the page on a smaller screen size. Changing .widget-container in the solution above to .rcw-widget-container fixed the the issue.