How do I undo the bleed-x() mixin at a smaller breakpoint so box4 (the yellow box) in example 2 goes back in between the purple columns and doesn't wrap to the next line.
.story4 {
@include bleed-x();
@include span(2);
background: yellow;
height: 80px;
@include breakpoint($small) {
@include span(8 last);
}
}
Bleed is a combination of negative margins and positive padding. Reset both to 0
to override:
@include breakpoint($small) {
@include span(8 last);
margin: 0;
padding: 0;
}
In general, I try to avoid breakpoint overrides by limiting the original application. Something more like this:
.story4 {
@include span(2);
background: yellow;
height: 80px;
// use your own tools to create max-width breakpoints...
// this limits the bleed, so we don't have to override it later.
@media (max-width: $small) {
@include bleed-x();
}
@include breakpoint($small) {
@include span(8 last);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.