Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
@media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
@media (min-width: 1800px) { @content; }
}
// usage
.my-box {
padding: 10px;
@include for-desktop-up {
padding: 20px;
}
}
@mblode

This comment has been minimized.

Copy link

mblode commented Nov 22, 2016

@mixin for-tablet-portrait-only* (Spelling mistake)

@nkhil

This comment has been minimized.

Copy link

nkhil commented Aug 22, 2018

Love this - found it through your 'the 100% correct way to do CSS breakpoints' article.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.