OpenTable responsive widget

The OpenTable widget’s CSS is a bit confusing and bloated. OpenTable will not (to my knowledge) give you their widget’s HTML markup without any CSS, so that you can write your own. It’s also not responsive by default.

It’s pretty easy to override their CSS so long as you ensure the “iframe” query string within your <script> is set to “false”. Here is some boilerplate CSS for modifying the OpenTable widget to my liking using Flex (instead of floats) and making it responsive:

CodePen

HTML

CSS

// All CSS must be within the "#ot-reservation-widget" ID in order to override default specificity

#ot-reservation-widget {
  // hide unnecessary stuff
  .ot-dtp-picker {
    h1 {
      display: none;
    }

    .ot-powered-by {
      display: none;
    }
  }

  // wide {
  .ot-dtp-picker {
    &.wide {
      width: min(1200px, 100%);

      @media (max-width: 800px) {
        width: min(300px, 100%);
        margin-inline: auto;
      }
    }
  }

  // form
  .ot-dtp-picker {
    .ot-dtp-picker-form {
      border: 2px solid #D0D0D0;
      border-radius: 0;
      height: auto;
      display: flex;
      text-align: center;

      @media (max-width: 800px) {
        flex-direction: column;
      }

      // select
      .ot-dtp-picker-selector {
        width: auto;
        float: none;
        flex: 1;
        display: flex;
        align-items: center;

        @media (max-width: 800px) {
          flex-basis: 4em;
          border-bottom: 2px solid #D0D0D0;

          &:last-of-type {
            border-bottom: none;
          }
        }

        .ot-dtp-picker-selector-link {
          padding: 0px;
          flex: 1;
        }

        &:hover {
          .ot-dtp-picker-selector-link {
            color: #000;
            outline: none;
          }
        }

        select {
          left: 0;
        }
      }

      // button
      .ot-dtp-picker-button {
        flex: 1;

        @media (max-width: 800px) {
          flex-basis: 4em;
          width: 100%;
        }
      }
    }

    // icons
    .ot-party-size-picker,
    .ot-date-picker,
    .ot-time-picker {
      .ot-dtp-picker-selector-link {
        &:before {
          color: #B27B0D;
          font-size: 1.3rem;
          top: auto;
        }

        &:after {
          font-size: 0.7rem;
        }
      }
    }

    // button
    .ot-button {
      background-color: #A71C20;
      border-color: #A71C20;

      &:hover,
      &:focus {
        background-color: #da3743;
        border-color: #da3743;
      }
    }

    input[type="submit"] {
      font-family: 'Raleway', sans-serif;
      text-transform: uppercase;
    }
  }
}