title: How to properly resize elements on Materialize CSS
body: <p>I'm developing an App and I'm using Materialize CSS. I'm pretty used to Bootstrap and I'm having a lot of difficulties, one of which is resizing the elements of the grid. With Bootstrap the grid elements align by itself but with Materialize the elements are all over each other here and I'm very frustrated with that. The four buttons overlap each other on smaller screens and also the button label text falls out of the box when the text is a large one. Am I doing something wrong? What can I do to prevent the elements from overlaping? Appreciate any help. Obs: The integrated Snippet trows an error but here in this link It works fine: <a href="https://jsfiddle.net/5bq5gpdh/4/" rel="nofollow noreferrer">https://jsfiddle.net/5bq5gpdh/4/</a></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-js lang-js prettyprint-override"><code>$(document).ready(function () {
          //$('.tap-target').tapTarget('open');
  
          let valorAposta = $('#valorAposta').val();
          $('#valorPremio').val(valorAposta);
          appendPartidas();
          //$('.collapsible').collapsible();
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      font-family: 'Roboto';
      color: #7C7C7D;
      font-size: 18px;
  }
  
  body {
      background-image: url(../img/background.png);
  }
  
  /* fallback */
  @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
  }
    
  .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
  }
  
  .waves-effect.waves-primary .waves-ripple {
      background-color: #007bff !important;
  }
  
  .collapsible-header {
      padding: 0 32px !important;
  }
  
  .scm-primary {
      background-color: #007bff !important;
  }
  
  .scm-secondary {
      background-color: #7C7C7D !important;
  }
  
  .scm-dropdown-bg {
      background-color: #ddd !important;
  }
  
  .white-text {
      color: white !important;
  }
  
  .scm-parent-width {
      position: absolute;
      width: 100%;
      left: 0%;
      margin-bottom: 30px;
  }
  
  .scm-content-padding {
      padding-top: 40px !important;
  }
  
  /*=================HOME=================*/
  .card .small-card {
      padding: 8px;
      padding-bottom: 0px;
  }
  
  .big-text {
      font-size: 1.3rem !important;
  }
  
  .small-text {
      font-size: 1.1rem !important;
  }
  
  .painel-aposta {
      width: 100%;    
      margin-top: 55px; 
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      z-index: 2;
  }
  
  
  .row.remove-after-row::after, .row.remove-after-row {
      content: none !important;
  }
  
  .match-panel-padding {
      padding: 2px !important;
  }
  
  .parent-width {
      width: 100% !important;
  }
  
  .no-padding {
      padding: 0;
      margin: 0 !important;
  }
  
  .no-bottom-margin {
      margin-bottom: 0px !important;
  }
  
  .scm-card-content {
      padding: 5px !important;
      background-color: #F4F4F4;
      box-shadow: none !important;
  }
  
  .scm-match-card {
      border: 1px solid #007bff;
  }
  
  .scm-primary-text {
      color: #007bff !important;
  }
  
  .scm-league-action {
      padding: 0px 0px !important;
  }
  
  .scm-odd-button {
      border: 1px solid #D6D6D6;
      color: #666;
      float: left;
      height: 60px;
      line-height: 30px;
      margin: 10px 0 0 10px;
      text-align: center;
      width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/&gt;
  &lt;body&gt;
      &lt;div id="homeBody"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col s12 m12 no-padding"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-content white-text center-align scm-primary scm-card-content"&gt;
                          Europe - Champions League
                      &lt;/div&gt;
                      &lt;div class="card-action no-padding"&gt;
                          
                          &lt;!-- Partidas --&gt;
                          &lt;div class="row no-padding"&gt;
                              &lt;div class="col s12 m12"&gt;
                                  &lt;div class="card scm-match-card"&gt;
                                      &lt;div class="card-content scm-card-content"&gt;
                                          &lt;div class="row no-padding"&gt;
                                              &lt;div class="col s8 small-text scm-primary-text"&gt;Paris Saint Germain X Atlético de Madrid&lt;/div&gt;
                                              &lt;div class="col s4 right small-text right-align scm-primary-text"&gt;30/12 - 15:00&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="card-action center-align scm-card-content"&gt;
                                          
                                          &lt;div class="row"&gt;
                                              &lt;div class="col s3 m3 l4"&gt;
                                                  &lt;a class="scm-odd-button"&gt;
                                                      &lt;span&gt;
                                                          &lt;strong&gt;2,00&lt;/strong&gt;
                                                          &lt;br&gt;
                                                          &lt;small&gt;Home&lt;/small&gt;
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/div&gt;
      
                                              &lt;div class="col s3 m3 l4"&gt;
                                                  &lt;a class="scm-odd-button"&gt;
                                                      &lt;span&gt;
                                                          &lt;strong&gt;2,00&lt;/strong&gt;
                                                          &lt;br&gt;
                                                          &lt;small&gt;Away&lt;/small&gt;
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/div&gt;
      
                                              &lt;div class="col s3 m3 l4"&gt;
                                                  &lt;a class="scm-odd-button"&gt;
                                                      &lt;span&gt;
                                                          &lt;strong&gt;2,00&lt;/strong&gt;
                                                          &lt;br&gt;
                                                          &lt;small&gt;Paris Saint Germain/Atlético de Madrid&lt;/small&gt;
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/div&gt;
  
                                              &lt;div class="col s3 m3 l4"&gt;
                                                  &lt;a class="scm-odd-button"&gt;
                                                      &lt;span&gt;
                                                          &lt;strong&gt;+&lt;/strong&gt;
                                                          &lt;br&gt;
                                                          &lt;small&gt;More&lt;/small&gt;
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>