growstuff/app/assets/stylesheets/mobile.scss

// Overrides applying only to mobile view. This must be at the end of the overrides file.
// Extra small devices (portrait phones, less than 576px)
@include media-breakpoint-down(md) {
  .container {
    max-width: calc(100% - 4px);
    margin: 2px;
    padding: 0;
  }

  // The container has no padding here for a row's negative margins to cancel out.
  main > .row,
  main > form > .row,
  main > .record-page > .row {
    margin-right: 0;
    margin-left: 0;
  }

  #maincontainer {
    width: 100%;
  }

.crop-actions {
  flex-direction: column;
  width: 100%;
  a {
    margin: auto;
    display: block;
  }
}

  h1 {
    font-size: 200%;
  }

  h2 {
    font-size: 130%;
  }

  h3 {
    font-size: 120%;
  }

  .card-title {
    margin-bottom: 0;
  }

  .card-footer {
    .d-flex {
      flex-direction: column;
    }
  }

  .sidebar {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .map {
    height: 300px;
  }

  section .btn {
    width: 100%;
  }

  .index-cards {
    .card {
      margin: 0.2em;
      width: 48%;

      // Shrink title to fit more on page
      .card-title {
        font-size: 1em;
      }

      // Restrict height of image when on smaller screens
      .img-card {
        height: 100px;
        object-fit: cover;
        width: 100%;
      }
    }
  }
}