Media query
Tue Oct 27 2020 05:31:31 GMT+0000 (UTC)
Saved by
@abeerIbrahim
#css
/*EX:.container {
padding: 0 15px;
// 576px window width and more
@include sm {
padding: 0 20px;
}
// 992px window width and more
@include lg {
margin-left: auto;
margin-right: auto;
max-width: 1100px;
} */
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
// Small tablets (portrait view)
$screen-md-min: 768px;
// Tablets and small desktops
$screen-lg-min: 992px;
// Large tablets and desktops
$screen-xl-min: 1200px;
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
content_copyCOPY
Comments