Whenever you need to style elements for certain breakpoints, e.g. large-up Screens, it is mandatory to use the app-mq() mixin.
Input
.c-content-teaser{
margin-bottom: 30px;
@include app-mq(large-up){
margin-bottom: 50px;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
Output
.c-content-teaser {margin-bottom: 30px; }
@media only screen and (min-width: 48em) {
.c-content-teaser {
margin-bottom: 50px;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7