Various classes are provided by materialize CSS to make media responsive.
Images: Images can be styled in following ways:
Responsive Images: To make images responsive to page width, responsive-img class is added with image tag.
<img class="responsive-img" src="image.jpg">
Circular Images: To make image look circular, circle class is added with image tag.
<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="image.jpg" class="circle responsive-img"> </div> <div class="col s10"> <span class="black-text"> This is a square image, "circle" class is added to it to make it appear circular. </span> </div> </div> </div> </div>
Video: Materialize CSS provides a container for Embedded Videos that resize responsively.
Responsive Embeds: To make embeds responsive, merely wrap them within div which has the class video-container.
<div class="video-container"> <iframe width="853" height="480" src="//www.youtube.com" frameborder="0" allowfullscreen> </iframe> </div>
Responsive Videos: To make HTML5 Videos responsive just add the class responsive-video to the video tag.
<video class="responsive-video" controls> <source src="video.mp4" type="video/mp4"> </video>
- Materialize CSS | Preloader
- Materialize CSS | Colors
- Materialize CSS | Grids
- Materialize CSS | Tables
- Materialize CSS | Helpers
- Materialize CSS | Badges
- Materialize CSS | Breadcrumbs
- Materialize CSS | Buttons
- Materialize CSS | Footer
- Materialize CSS | Typography
- Materialize CSS | Collections
- Materialize CSS | Pagination
- Materialize CSS | Icons
- Materialize CSS Navbars
- Materialize CSS - Modals
- Materialize CSS Dropdown
- Materialize CSS | Waves
- Materialize CSS - Pulse and Shadow
- Materialize CSS | Tooltips
- Materialize CSS Switches
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.