Advertisement
d4rky

Bootstrap 3 responsive mixins

Jun 7th, 2017
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.76 KB | None | 0 0
  1. // 1200px+
  2. @mixin only-desktop-hd() {
  3.   @media (min-width: $screen-lg-min) { @content }
  4. }
  5.  
  6. // 992px - 1200px
  7. @mixin only-desktop() {
  8.   @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @content }
  9. }
  10. @mixin at-least-desktop() {
  11.   @media (min-width: $screen-md-min) { @content }
  12. }
  13. @mixin at-most-desktop() {
  14.   @media (max-width: $screen-md-max) { @content }
  15. }
  16.  
  17. // 768px - 991px
  18. @mixin only-tablet() {
  19.   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @content }
  20. }
  21. @mixin at-least-tablet() {
  22.   @media (min-width: $screen-sm-min) { @content }
  23. }
  24. @mixin at-most-tablet() {
  25.   @media (max-width: $screen-sm-max) { @content }
  26. }
  27.  
  28. // 0px - 767px
  29. @mixin only-mobile() {
  30.   @media (max-width: $screen-xs-max) { @content }
  31. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement