responsive MaterializeCSS design - html

Question

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.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
<div class="card-image">
<img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
</div>
<div class="card-stacked grey-text text-lighten-1">
<div class="row">
<div class="card-content" style="margin-top: -30px;">
<h3 class="light-blue-text"><b>Username</b></h4>
<p style="margin-top: -10px;">Developer</p>
<br>
<br>
<h5><b>Area of Interest</b></h4>
<p>HTML</p>
</div>
</div>
<div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
<span><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></span>
<span><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></span>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/
Above link I have removed all attempts I made to make it responsive.

Answer 1

There were quite a few parts in your code that strayed from the materialize suggested structure.
1) In general, until you are familiar with what component you're working with, stick to the code samples:
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Cards live in cols, which live inside rows.
2) Use card-action as your card footer, not .footer
There is no .footer class for cards. It is called .card-action:
<div class="card-action">
This is a link
</div>
3) Use .btn to give any element a button style:
<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>
You had span > button > a - this is not necessary. Keep it simple. Any element can be made to look like a button just by adding .btn. Also, if your button text is too long, it will spill out or cut off. Not good. Make sure you're not putting unnecessary extra text into buttons. I took out the word 'profile' from linked in, the other solution would be to decrease font size or switch to a standard card to give more room for the footer.
4) Be careful what restrictions you're putting on your images, and also a standard card (image up top) can often work better. To make your image work better responsively, I took off the 300x height and instead gave it height:100% and object-fit:cover, which will fill the space better (object-fit is not supported in IE)
5) Lastly, gave your a tags a little margin so they have spacing when stacked on mobile.
Updated codepen here.
EDIT:
Added a second card example using Card Image, which places the card image at the top of the card.
https://materializecss.com/buttons.html
https://materializecss.com/cards.html