title: responsive MaterializeCSS design
body: <p>I have to make a User Page for our club website, but I am using Materialize CSS instead of Bootstrap. I am having a hard time making it responsive. My content gets displays weirdly, text goes out of the box and buttons get glued together.</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>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
          &lt;div class="col s12"&gt;
              &lt;div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)"&gt;
              &lt;div class="card-image"&gt;
                  &lt;img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;"&gt;
              &lt;/div&gt;
              &lt;div class="card-stacked grey-text text-lighten-1"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="card-content" style="margin-top: -30px;"&gt;
                          &lt;h3 class="light-blue-text"&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/h4&gt;
                          &lt;p style="margin-top: -10px;"&gt;Developer&lt;/p&gt;
                          &lt;br&gt;
                          &lt;br&gt;
                          &lt;h5&gt;&lt;b&gt;Area of Interest&lt;/b&gt;&lt;/h4&gt;
                          &lt;p&gt;HTML&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="footer" style="margin-left: 5px; margin-bottom: 5px;"&gt;
                      &lt;span&gt;&lt;a href="#" target="_blank"&gt;&lt;button class="btn #0d47a1 blue darken-4"&gt;&lt;i class="fab fa-linkedin"&gt;&lt;/i&gt; LinkedIn Profile &lt;/button&gt;&lt;/a&gt;&lt;/span&gt;
  
  
                      &lt;span&gt;&lt;a href="#" target="_blank"&gt;&lt;button class="btn #e65100 orange darken-4"&gt;&lt;i class="fa fa-graduation-cap"&gt;&lt;/i&gt;Profile &lt;/button&gt;&lt;/a&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/" rel="nofollow noreferrer">https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/</a></p>
  
  <p>Above link I have removed all attempts I made to make it responsive. </p>