piler/webui/view/theme/default/assets/css/responsive.scss

/** Respsonsive adjustments **/

#logo-lg {
  max-width: 100%;
}

body {
  // overwrites from metro-bootstrap.css
  @media(min-width: 980px) {
    padding-top: 0;
  }
  @media (max-width: 767px) {
    padding-left: 10px;
    padding-right: 10px;

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: -10px;
      margin-right: -10px;
    }
  }
}

#menu {
  position: relative;
  z-index: 100;
}

@media (max-width: 979px) {
  .nav-collapse.collapse {
    position: absolute;
    top: 52px;
    width: 100vw;
    margin: 0 0 0 -5px;
  }
}

#searchcontainer {

  @media (max-width: 767px) {
    min-width: auto;
    max-width: 100%;
  }

  .control-group {

    .controls {
      .dropdown-backdrop {
        display: none;
      }

      @media (max-width: 767px) {
        button {
          font-size: 14px;
          width: 44%;

          .caret {
            margin-top: 9px;
            margin-right: 0;
            margin-left: -5px;
          }

          &#button_search, #button_options {
            width: 28%;
          }
        }
      }
    }

    .dropdown-menu {
      left: auto;
      right: 0;
    }
  }
}

#searchpopup1 {
  @media (max-width: 979px) {
    max-width: 100%;

    @media (max-width: 767px) {
      top: 40px;
    }

    form {
      padding-left: 15px;
      padding-right: 15px;
      margin-bottom: 0;
    }
  }

}

#piler1 {
  @media (min-width: 980px) {
    &.container, &.container-fluid {
      // offset for menu bar
      margin-top: 60px;
    }
  }
}

#mainscreen {

  @media (max-width: 767px) {
    min-width: auto;
    max-width: 100%;
    left: 10px;
    right: 10px;
  }

  #mailcontframe {
    @media (max-width: 767px) {
      table#results, table#resultstable {
        th {
          line-height: normal;
          font-size: 14px;
          white-space: nowrap;
        }
      }
      #pagingrow, #functionrow {
        height: auto;
        min-height: 33px;
      }
    }

    #messagelistfooter {

      #functionrow {

        #functionbox {
          @media (max-width: 767px) {
            float: none;
            width: 100%;

            a.btn-custom {
              padding: 9px;
              height: auto;
            }

            .add-on {
              width: 40%;
            }
            #tag_value {
              min-width: auto;
              max-width: none;
              width: calc(58% - 96px);
            }
          }
        }
      }
    }
  }

  #mailpreviewframe {
    #notesbox {
      display: none;
    }

    @media (max-width: 767px) {
      .messageheader, #notesbox {
        position: static;
      }
      #notesbox {
        top: auto;
        right: auto;
        max-width: 100%;
        overflow: hidden;

        .add-on {
          display: block;
          text-align: left;
        }

        input {
          &[type='text'] {
            max-width: 70%;
          }

          &[type='button'] {
            width: calc(30% - 10px);
          }
        }


      }
    }
  }
}

#piler1.container {

  span#A1 {
    display: block;
  }

  @media (max-width: 767px) {
    max-width: 100%;
    width: auto;

    h2 {
      font-size: 28px;
    }
    h3 {
      font-size: 18px;
      line-height: 26px;

      > strong {
        display: block;
      }
    }
  }
}