Media can be styled in different ways using Materialize.

Variables

When using Sass,you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in _variables.scss.

$primary-color:color("materialize-red","lighten-2")!default;$primary-color-light:false!default;$primary-color-dark:false!default;@if not $primary-color-light{$primary-color-light:lighten($primary-color,15%)}@if not $primary-color-dark{$primary-color-dark:darken($primary-color,15%)}$secondary-color:color("teal","lighten-1")!default;$success-color:color("green","base")!default;$error-color:color("red","base")!default;$link-color:color("light-blue","darken-1")!default;

Media Queries

We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range.

CSS

Small screens are defined as having a max-width of 600px
Medium screens are defined as having a max-width of 992px
Large screen are defined as having a min-width of 992px 

.hide-on-small-only .hide-on-small-and-down .hide-on-med-and-down .hide-on-med-and-up .hide-on-med-only .hide-on-large-only .show-on-large .show-on-medium .show-on-small .show-on-medium-and-up .show-on-medium-and-down

Sass

@media #{$small-and-down}{// styles for small screens and down}@media #{$medium-and-up}{// styles for medium screens and larger}@media #{$medium-and-down}{// styles for medium screens and down}@media #{$large-and-up}{// styles for large screens and up}@media #{$extra-large-and-up}{// styles for extra large screens and up}
add
add