Materialize: Add a 4th CSS media query breakpoint.

Created on 28 Aug 2016 · 6Comments · Source: Dogfalo/materialize

I know this would require a lot of work to implement, but the large breakpoint covers a far too wide range. It is not sufficient to choose a fraction of twelve that fits both the large and extra large, especially when the content is split vertically, for example with a sidebar or with sub columns within another column.
Please refer to these two examples. The first one shows a column system just above the medium to large breakpoint.
image
The side column, has the class l4 and the map has l8, which covers both the large and extra large screens.
The checkbox labels has been modified to have ellipsis when they overflow. It would be nice to have an extra large breakpoint to allow for more dynamic responsive pages.

This image shows the same page in a window with a width of 1080p.

If I change the breakpoint fractions to l5 and l7, the sidebar gets way too big on small large screens:

large

extra-large

On the medium breakpoint, I break the checkboxes into a single column, but without another breakpoint, I can't really do that for the smaller of the large screens.

I don't know if my scenario is just weird, or there really is something to this. Please let me hear your thoughts on this.

Source

joglr

👍6

Most helpful comment

Hey I have managed to add two more breakpoints, extra small and extra large. Place the following in your main.scss ..

$extra-small-screen-up: 481px !default;
$small-screen-up: 769px !default;
$medium-screen-up: 1025px !default;
$large-screen-up: 1441px !default;
$extra-large-screen-up: 2561px !default;
$extra-small-screen: 480px !default;
$small-screen: 768px !default;
$medium-screen: 1024px !default;
$large-screen: 1440px !default;
$extra-large-screen: 2560px !default;

$small-and-up: "only screen and (min-width : #{$extra-small-screen-up})" !default;
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$extra-small-and-down: "only screen and (max-width : #{$extra-small-screen})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$large-and-down: "only screen and (max-width : #{$large-screen})" !default;
$small-only: "only screen and (min-width : #{$extra-small-screen-up}) and (max-width : #{$small-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
$large-only: "only screen and (min-width : #{$medium-screen-up}) and (max-width : #{$large-screen})" !default;
$extra-large-only: "only screen and (min-width : #{$large-screen-up}) and (max-width : #{$extra-large-screen})" !default;

$num-cols: 12 !default;

.hide-on-extra-small-only, .hide-on-extra-small-and-down {
  @media #{$extra-small-and-down} {
    display: none !important;
  }
}
.hide-on-small-only, .hide-on-small-and-down {
  @media #{$small-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-down {
  @media #{$medium-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-up {
  @media #{$medium-and-up} {
    display: none !important;
  }
}
.hide-on-med-only {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: none !important;
  }
}
.hide-on-large-and-down {
  @media #{$large-and-down} {
    display: none !important;
  }
}
.hide-on-large-and-up {
  @media #{$large-and-up} {
    display: none !important;
  }
}
.hide-on-large-only {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: none !important;
  }
}
.hide-on-extra-large-only {
  @media #{$extra-large-and-up} {
    display: none !important;
  }
}
.show-on-extra-large {
  @media #{$extra-large-and-up} {
    display: initial !important;
  }
}
.show-on-large {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: initial !important;
  }
}
.show-on-medium {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: initial !important;
  }
}
.show-on-small {
  @media #{$small-and-down} {
    display: initial !important;
  }
}
.show-on-medium-and-up {
  @media #{$medium-and-up} {
    display: initial !important;
  }
}
.show-on-medium-and-down {
  @media #{$medium-and-down} {
    display: initial !important;
  }
}
.show-on-large-and-up {
  @media #{$large-and-up} {
    display: initial !important;
  }
}
.show-on-large-and-down {
  @media #{$large-and-down} {
    display: initial !important;
  }
}

.row {

  .col {

    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.xs#{$i} {
        width: $perc !important;
        margin-left: 0 !important;
      }
      $i: $i + 1;
    }
    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.offset-xs#{$i} {
        margin-left: $perc !important;
      }
      $i: $i + 1;
    }

    @media #{$small-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.s#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-s#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$medium-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.m#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-m#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.l#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-l#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$extra-large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.xl#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-xl#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }
  }
}

xiki808 on 30 Nov 2016

👍3

All 6 comments

I would love this too!

xiki808 on 30 Nov 2016

This is also a problem I have with my main application as I have two l6 cards (chart & data table) that feel squished with ~1024px width screens but fine with ~1280px. Meanwhile, using all 12 columns or splitting the two unevenly feels huge on large large screens (my workstation has 3 4K monitors each at 3840x2160 and most of my users have at least a single 1920x1080 one)

FWIW, Bootstrap appears to use 1200px as the next breakpoint:
http://getbootstrap.com/css/#grid-options

jacobq on 30 Nov 2016

Hey I have managed to add two more breakpoints, extra small and extra large. Place the following in your main.scss ..

$extra-small-screen-up: 481px !default;
$small-screen-up: 769px !default;
$medium-screen-up: 1025px !default;
$large-screen-up: 1441px !default;
$extra-large-screen-up: 2561px !default;
$extra-small-screen: 480px !default;
$small-screen: 768px !default;
$medium-screen: 1024px !default;
$large-screen: 1440px !default;
$extra-large-screen: 2560px !default;

$small-and-up: "only screen and (min-width : #{$extra-small-screen-up})" !default;
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$extra-small-and-down: "only screen and (max-width : #{$extra-small-screen})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$large-and-down: "only screen and (max-width : #{$large-screen})" !default;
$small-only: "only screen and (min-width : #{$extra-small-screen-up}) and (max-width : #{$small-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
$large-only: "only screen and (min-width : #{$medium-screen-up}) and (max-width : #{$large-screen})" !default;
$extra-large-only: "only screen and (min-width : #{$large-screen-up}) and (max-width : #{$extra-large-screen})" !default;

$num-cols: 12 !default;

.hide-on-extra-small-only, .hide-on-extra-small-and-down {
  @media #{$extra-small-and-down} {
    display: none !important;
  }
}
.hide-on-small-only, .hide-on-small-and-down {
  @media #{$small-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-down {
  @media #{$medium-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-up {
  @media #{$medium-and-up} {
    display: none !important;
  }
}
.hide-on-med-only {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: none !important;
  }
}
.hide-on-large-and-down {
  @media #{$large-and-down} {
    display: none !important;
  }
}
.hide-on-large-and-up {
  @media #{$large-and-up} {
    display: none !important;
  }
}
.hide-on-large-only {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: none !important;
  }
}
.hide-on-extra-large-only {
  @media #{$extra-large-and-up} {
    display: none !important;
  }
}
.show-on-extra-large {
  @media #{$extra-large-and-up} {
    display: initial !important;
  }
}
.show-on-large {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: initial !important;
  }
}
.show-on-medium {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: initial !important;
  }
}
.show-on-small {
  @media #{$small-and-down} {
    display: initial !important;
  }
}
.show-on-medium-and-up {
  @media #{$medium-and-up} {
    display: initial !important;
  }
}
.show-on-medium-and-down {
  @media #{$medium-and-down} {
    display: initial !important;
  }
}
.show-on-large-and-up {
  @media #{$large-and-up} {
    display: initial !important;
  }
}
.show-on-large-and-down {
  @media #{$large-and-down} {
    display: initial !important;
  }
}

.row {

  .col {

    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.xs#{$i} {
        width: $perc !important;
        margin-left: 0 !important;
      }
      $i: $i + 1;
    }
    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.offset-xs#{$i} {
        margin-left: $perc !important;
      }
      $i: $i + 1;
    }

    @media #{$small-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.s#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-s#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$medium-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.m#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-m#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.l#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-l#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$extra-large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.xl#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-xl#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }
  }
}

xiki808 on 30 Nov 2016

👍3

@jonasroessum, I agree with you and I am facing the same problem as you on my project.

johnqiuwan on 25 Dec 2016

@xikky
Making the grid similar to the sizes used on bootstrap:

$extra-small-screen-up: 769px !default;
$small-screen-up: 993px !default;
$medium-screen-up: 1201px !default;
$large-screen-up: 1441px !default;
$extra-large-screen-up: 2561px !default;
$extra-small-screen: $extra-small-screen-up - 1px !default;
$small-screen: $small-screen-up - 1px !default;
$medium-screen: $medium-screen-up - 1px !default;
$large-screen: $large-screen-up - 1px !default;
$extra-large-screen: $extra-large-screen-up - 1px !default;

$small-and-up: "only screen and (min-width : #{$extra-small-screen})" !default;
$medium-and-up: "only screen and (min-width : #{$small-screen})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen})" !default;
$extra-small-and-down: "only screen and (max-width : #{$extra-small-screen})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$large-and-down: "only screen and (max-width : #{$large-screen})" !default;
$small-only: "only screen and (min-width : #{$extra-small-screen}) and (max-width : #{$small-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen}) and (max-width : #{$medium-screen})" !default;
$large-only: "only screen and (min-width : #{$medium-screen}) and (max-width : #{$large-screen})" !default;
$extra-large-only: "only screen and (min-width : #{$large-screen}) and (max-width : #{$extra-large-screen})" !default;