To make your website responsive you can use a grid. You can adjust breakpoints, gutter and column amount.
You can use
.row so that it's all in one line.
There are 5 breakpoints
to suit your needs.
In order to make the columns work you need to wrap it inside a
<div class="row"> <div class="col xs4 s12 m6"> Example </div> </div>
You can also use the row and columns in SCSS by simply extending the class.
@extend .col, .s12, .m6;
To follow the Material Design
specifications as closely as possible some breakpoints have different settings.
.xs Only has 4 columns,
s has 8 to 12 columns depending on the width of the screen.
Push, pull and offset
You can also push, pull and offset which work the same as the columns.
.offset-s these examples are for small screen but they work with all sizes named before.
<div class="row"> <div class="col xs4 s12 m6 offset-m6"> Example </div> </div> @extend .col, .s12, .m6, offset-m6; <div class="row"> <div class="col xs4 s12 m6 push-m6"> Display 1 </div> <div class="col xs4 s12 m6 pull-m6"> Display 2 </div> </div>
If you want an element to be hidden for a certain device you can use the following classes:
<div class="col s4 s-hidden"> Small hidden </div> <div class="col s4 m-hidden"> Medium hidden </div> <div class="col s4 l-hidden"> Large hidden </div>
There are also a couple of media queries you can use with SCSS. The media queries you can use are listed here.
You can use the media queries like the following example:
|$xsmall-screen||Variable /||Change the width of xsmall screens|
|$small-screen||Variable /||Change the width of small screens|
|$medium-screen||Variable / integer||Change the width of medium screens|
|$large-screen||Variable / integer||Change the width of large screens|
|$xlarge-screen||Variable / integer||Change width of xlarge screen|
|$gutter||Variable / integer||Change the width of the gutter (space between columns)|
|$large-gutter||Variable / integer||Change the width of the gutter for medium and up|
|$columns||Variable / integer||Change the amount of columns|