Growstuff/growstuff

// 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 {
    margin: 2px;
    padding: 0;
  }
 
Avoid using id selectors
  #maincontainer {
    width: 100%;
  }
 
Selector should have depth of applicability no greater than 2, but was 3
  .navbar .nav > li {
    display: block;
  }
 
  .navbar .navbar-form {
    padding-left: 0;
    padding-right: 0;
 
Avoid using id selectors
Selector should have depth of applicability no greater than 2, but was 3
    #navbar-search {
      width: 100%;
    }
  }
 
  .navbar-brand {
    margin-bottom: 1em;
 
    .site-name {
      font-size: auto;
      text-align: justify;
    }
 
Begin pseudo elements with double colons: `::`
    .site-name:after {
      content: "";
      display: inline-block;
      width: 100%;
    }
  }
 
  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
Selector should have depth of applicability no greater than 2, but was 3
      .card-title {
        font-size: 1em;
      }
 
      // Restrict height of image when on smaller screens
Selector should have depth of applicability no greater than 2, but was 3
      .img-card {
        height: 100px;
        object-fit: cover;
        width: 100%;
      }
    }
  }
}