title: Getting @media queries to work correctly with buttons
body: <p>I'm trying to do a few things here: </p>
  
  <ol>
  <li>make these buttons responsive to each screen size</li>
  <li>to have the buttons shift down when the screen size gets to Mobile- 
  size and smaller (but keeping at least 4 buttons per row so I can add 
  more buttons later)</li>
  <li>when the screen size gets to 768px or above, the rows of buttons shift 
  back to being wider with 8 buttons per row</li>
  <li>using bootstrap 4 (but will use 3 if it's better for this)</li>
  </ol>
  
  <p>I've been trying to get these working like this for a couple days now but I just can't seem to get the media queries right. This is for a photo gallery I'm building.</p>
  
  <p>The code I wrote is below and here's a codepen of it - <a href="https://codepen.io/gradyhouston/pen/bKLbOO/" rel="nofollow noreferrer">https://codepen.io/gradyhouston/pen/bKLbOO/</a></p>
  
  <p>Thank you for any help!</p>
  
  <p><strong>HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img-responsive {
    display: none;
  }
  
  @media only screen and (min-width: 376px) and (max-width: 768px) {
    .page-head {
      font-size: 18px;
      /* margin-top: -20px; */
      padding: 0px;
    }
  }
  
  @media only screen and (min-width: 376px) and (max-width: 768px) {
    .container-gallery .vertical-buttons {
      display: flex;
      align-items: center;
      /* display: block; */
    }
  }
  
  
  /* @media only screen and (min-width: 768px) {
  
      } */
  
  .all-button {
    display: flex;
    justify-content: center;
    margin: auto;
  }
  
  .vertical-align {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 5px;
  }
  
  .vertical-buttons {
    display: flex;
    justify-content: center;
    padding: 5px;
  }
  
  .locations {
    /* margin: 0 auto; */
    /* position: absolute;
      display: flex;
      justify-content: space-evenly; */
  }
  
  .button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    width: 90px;
    height: 48px;
    border: 1px solid black;
    background-color: #285e84;
    /*   background-color: transparent; */
    border-radius: 2px;
    color: #fff;
    /* letter-spacing: 2px; */
    /* margin-bottom: 30px */
  }
  
  .button:hover {
    background-color: #363636;
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
    color: #fff;
  }
  
  .button:active,
  .button.is-checked {
    background-color: #42928b;
  }
  
  .button.is-checked {
    color: white;
    text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
  }
  
  .button:active {
    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="locations"&gt;
    &lt;button type="button" class="button all-button is-checked" data- filter=""&gt;All&lt;/button&gt;
    &lt;div class="container-gallery"&gt;
  
      &lt;div class="row vertical-align"&gt;
        &lt;div class="col vertical-buttons xs4 s4  l12"&gt;
          &lt;button type="button" class="button" data- filter=".jekyll"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".st- 
      simons"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data- filter=".monterey"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".blizzcon- 
      2014"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".timberline- 
      lodge"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".lake- 
      trillium"&gt;Test&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row vertical-align"&gt;
        &lt;div class="col vertical-buttons xs4 s4 l12"&gt;
          &lt;button type="button" class="button" data-filter=".santa- 
      cruz"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".san- 
      francisco"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".muir"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data- filter=".vancouver"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".willamette- 
      falls"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".arlington- 
      cemetery"&gt;Test&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row vertical-align"&gt;
        &lt;div class="col vertical-buttons xs4 s4 l12"&gt;
          &lt;button type="button" class="button" data- filter=".edgewood"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".hwy- 
      1"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data- filter=".filoli"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data- filter=".seattle"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".chihuly- 
      garden"&gt;Test&lt;/button&gt;
          &lt;button type="button" class="button" data-filter=".mount- 
      hood"&gt;Test&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>