Перекрывающиеся элементы MDL при уменьшении области просмотра

Question

Я использую Material Design Lite. У меня есть два раздела, которые перекрываются, когда ширина области просмотра уменьшается. Вот два изображения, первое из которых показывает правильное поведение на большой ширине, а второе показывает поведение перекрытия на меньшей ширине:

Вот блок из четырех карточек материалов (верхний элемент на скриншотах):

<!-- Expert Solutions Card Grid -->
    <div class="solutions-section">
      <div class="android-section-title mdl-typography--display-1-color-contrast section-header">Expert solutions</div>
      <div class="android-card-container mdl-grid">
        <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
          <div class="mdl-card__media">
            <img src="images/more-from-1.png">
          </div>
          <div class="mdl-card__title">
             <h4 class="mdl-card__title-text">Get an app for Android</h4>
          </div>
          <div class="mdl-card__supporting-text">
            <span class="mdl-typography--font-light mdl-typography--subhead">We provide business value by strengthening your mobile presence. Need integration with existing systems or peripherals? We have you covered. </span>
          </div>
          <div class="mdl-card__actions">
             <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
               Learn more
               <i class="material-icons">chevron_right</i>
             </a>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
          <div class="mdl-card__media">
            <img src="images/more-from-4.png">
          </div>
          <div class="mdl-card__title">
             <h4 class="mdl-card__title-text">Evolve your existing iOS project</h4>
          </div>
          <div class="mdl-card__supporting-text">
            <span class="mdl-typography--font-light mdl-typography--subhead">Our team helps maintain codebases and drive new feature development. Augment your resources with our mobile expertise. </span>
          </div>
          <div class="mdl-card__actions">
             <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
               Learn more
               <i class="material-icons">chevron_right</i>
             </a>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
          <div class="mdl-card__media">
            <img src="images/more-from-2.png">
          </div>
          <div class="mdl-card__title">
             <h4 class="mdl-card__title-text">Integrate with billions of devices</h4>
          </div>
          <div class="mdl-card__supporting-text">
            <span class="mdl-typography--font-light mdl-typography--subhead">We have hands-on experience developing for phone, tablet, smartwatch, Bluetooth Low Energy, and proprietary peripherals. Where can we help take your business?</span>
          </div>
          <div class="mdl-card__actions">
             <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
               Check it out
               <i class="material-icons">chevron_right</i>
             </a>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
          <div class="mdl-card__media">
            <img src="images/more-from-3.png">
          </div>
          <div class="mdl-card__title">
             <h4 class="mdl-card__title-text">Your Partner in Mobile Strategy</h4>
          </div>
          <div class="mdl-card__supporting-text">
            <span class="mdl-typography--font-light mdl-typography--subhead">Need help understanding the mobile space? Let us work together to define your mobile strategy to increase your bottom-line. We care about your KPI's.</span>
          </div>
          <div class="mdl-card__actions">
             <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" href="">
               See our process
               <i class="material-icons">chevron_right</i>
             </a>
          </div>
        </div>
      </div>
    </div>

Вот нижняя полоса, которая отображается под карточками материалов:

<!-- Delivery Section -->
    <div class="delivery-section">
      <div class="delivery-band">
        <div class="delivery-band-text">
          <div class="mdl-typography--display-2 mdl-typography--font-thin section-">Speed and robustness</div>
          <p class="mdl-typography--headline mdl-typography--font-thin">
            We deliver results on time and within budget. We have the flexibility of a small shop and direct experience working on small to large projects. Avoid offshore bait and switch: you will always speak directly with the solution architect responsible for your delivery.
          </p>
          <p>
            <a class="mdl-typography--font-regular mdl-typography--text-uppercase android-alt-link" href="">
              Contact us for your deliverable&nbsp;<i class="material-icons">chevron_right</i>
            </a>
          </p>
        </div>
      </div>
    </div>

А вот и CSS:

/***** Delivery Section *****/
.delivery-section {
  background-size: cover;
  position: relative;
  height: 300px;
}

.delivery-band {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #37474f;
}

.delivery-band-text {
  max-width: 800px;
  margin-left: 25%;
  padding: 24px;
  text-align: left;
  color: white;
}

  .delivery-band-text p {
    padding-top: 8px;
  }

/***** Expert Solutions section *****/
.solutions-section {
  padding: 80px 0;
  max-width: 1044px;
  margin-left: auto;
  margin-right: auto;
}
  .solutions-section .android-section-title {
    margin-left: 12px;
    padding-bottom: 24px;
  }

.android-card-container {

}

  .android-card-container .mdl-card__media {
    overflow: hidden;
    background: transparent;
  }

    .android-card-container .mdl-card__media img {
      width: 100%;
    }

  .android-card-container .mdl-card__title {
    background: transparent;
    height: auto;
  }

  .android-card-container .mdl-card__title-text {
    color: black;
    height: auto;
  }

  .android-card-container .mdl-card__supporting-text {
    height: auto;
    color: black;
    padding-bottom: 56px;
  }

  .android-card-container .mdl-card__actions {
    position: absolute;
    bottom: 0;
  }

  .android-card-container .mdl-card__actions a {
    border-top: none;
    font-size: 16px;
  }

.android-footer {
  background-color: #fafafa;
  position: relative;
}

  .android-footer a:hover {
    color: #8bc34a;
  }

  .android-footer .mdl-mega-footer--top-section::after {
    border-bottom: none;
  }

  .android-footer .mdl-mega-footer--middle-section::after {
    border-bottom: none;
  }

  .android-footer .mdl-mega-footer--bottom-section {
    position: relative;
  }

  .android-footer .mdl-mega-footer--bottom-section a {
    margin-right: 2em;
  }

  .android-footer .mdl-mega-footer--right-section a .material-icons {
    position: relative;
    top: 6px;
  }

.android-link-menu:hover {
  cursor: pointer;
}

Я действительно ценю это - я застрял !!