Responsive Images

To make images resize responsively to page width,you can add the class responsive-imgto your image tag. It will now have a max-width:100%and height:auto.

style typography

Media can be styled in different ways using Materialize.

<a class="btn btn-floating pulse"><i class="material-icons">menu</i></a><a class="btn btn-floating btn-large pulse"><i class="material-icons">cloud</i></a><a class="btn btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>

Circular images

To make images appear circular,simply add class="circle"to them

This is a square image. Add the "circle" class to it to make it appear circular. 
<div class="col s12 m8 offset-m2 l6 offset-l3"><div class="card-panel grey lighten-5 z-depth-1"><div class="row valign-wrapper"><div class="col s2"><img src="../../app-assets/images/avatar/avatar-7.png" alt="" class="circle responsive-img"><!-- notice the "circle" class --></div><div class="col s10"><span class="black-text">This is a square image. Add the "circle" class to it to make it appear circular. </span></div></div></div></div>

Videos

We provide a container for Embedded Videos that resizes them responsively.

Responsive Embeds

To make your embeds responsive,merely wrap them with a containing div which has the class video-container

<div class="video-container"><iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" allowfullscreen></iframe></div>

If your video does not have video controls,add the no-controlsclass to the video container.

Responsive Videos

To make your HTML5 Videos responsive just add the class responsive-videoto the video tag.

<video class="responsive-video" controls><source src="movie.mp4" type="video/mp4"></video>
add