bigbluebutton-Github/labs/bbb-html5-client/assets/css/mobile.less

// note: the widths in the media queries have to be exactly the ones used by
// bootstrap, otherwise it will not behave properly.

.all-mobiles {

  // first the common style used always when in mobile mode
  #presentation-wrapper {
    top: 6vh; // the element is not floating anymore, need a top gap
  }
  #presentation-wrapper, #whiteboard {
    width: 100%;
  }
  #video {
    float: left;
  }
  #sidebar-right {
    top: 66vh; // the element is not floating anymore, need a top gap

    // have to override a few attributes set by bootstrap
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
  }

  #session-view {
    // common layout for when chat OR video is on
    &.chat-on, &.video-on {
      #presentation-wrapper, #whiteboard {
        height: 60vh;
        width: 100%;
      }
      #chat, #video {
        height: 33vh;
      }
      #sidebar-right {
        position: absolute;
      }
    }

    // when chat only is on, make it fullsize
    &.chat-on #chat {
      width: 100%;
    }

    // when video only is on, make it fullsize
    &.video-on #video {
      width: 100%;
    }

    // when chat AND video are on, make them smaller
    &.chat-on.video-on {
      #video {
        width: 30%;
      }
      #chat {
        width: 70%;
      }
    }
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 992px) {
  .all-mobiles;
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  .all-mobiles;
}

/* Landscape phones and down */
@media (max-width: 480px) {
  .all-mobiles;
}