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">
<div class="col s10">
This is a square image, "circle"
class is added to it to make it
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.
<iframe width="853" height="480"
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">
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses
are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!