Breakpoints
Handles width breakpoints for CSS, so different styling can be used related to screen width.
Features
- SASS mixins.
- Influenced by David Gilbertson.
Implementation
- Use the mixin in your .scss file:
@include breakpoints.for-phone-only { }
Alternatives
Width (px) and name.
Phone
←599
for-phone-only
Tablet
600→
for-tablet-portrait-up
600→←899
for-tablet-portrait-only
900→
for-tablet-landscape-up
900→←1199
for-tablet-landscape-only
Desktop
1200→
for-desktop-up
1200→←1799
for-desktop-only
1800→
for-big-desktop-up
Visibility
Show content depending on screen width, according to the breakpoints. The content will be hidden if the breakpoint is not matched. Works with all breakpoints in the theme.
Implement by setting the class attribute of any Html tag to show- + breakpoint name.
Examples
<h1 class="show-for-phone-only">Phone</h1>
<h1 class="show-for-tablet-portrait-only">Tablet portrait</h1>
<h1 class="show-for-tablet-landscape-only">Tablet landscape</h1>
<h1 class="show-for-desktop-only">Desktop</h1>
<h1 class="show-for-big-desktop-up">Big desktop</h1>
<p>
This text will be
<span class="show-for-tablet-portrait-up">hidden</span>
<span class="show-for-phone-only">visible</span>
on small screens.
</p>