0 0
Read Time35 Second


@mixin bp($point) {
@if $point == mq1199 {
@media (max-width: 1199px) { @content; }
}
@else if $point == mq991 {
@media (max-width: 991px) { @content; }
}
@else if $point == mq768 {
@media (max-width: 768px) { @content; }
}
@else if $point == mq640 {
@media (max-width: 640px) { @content; }
}

@else if $point == mq480 {
@media (max-width: 480px) { @content; }
}

@else if $point == mq360 {
@media (max-width: 360px) { @content; }
}

@else if $point == mq320 {
@media (max-width: 320px) { @content; }
}

}

.sidebar {
width: 15%;
border:10px solid red;
@include bp(mq1199) {
width: 20%;
border:8px solid magenta;
}
@include bp(mq991) {
width: 33%;
border:6px solid blue;
}
@include bp(mq768) {
width: 50%;
border:4px solid aqua;
}
@include bp(mq480) {
width: 75%;
border:2px solid lime;
}

@include bp(mq360) {
width: 100%;
border:1px solid green;
}

}

About Post Author

TahuBanyak

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post Tutorial : For Each SCSS
Next post slick js display none onload

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *