Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The mixins below helps target small, medium, and large size screens for Zurb foundation 4. This also helps IE8 to be targeted. You can see IE8 being targeted in the large() mixin. It has .lt-ie9 being added on all specified large styling. This helped me a lot since IE 8 does not have media queries. Instead of targeting with a media query it targ…
@mixin small() {
@media only screen and (max-width: 767px) {
@content;
}
}
@mixin medium() {
@media only screen and (min-width: 768px) and (max-width: 1024px) {
@content;
}
}
@mixin large() {
@media only screen and (min-width: 768px){
@content;
}
.lt-ie9 & {
@content;
}
}
h1 {
font-size: 14px;
text-align: center;
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 24px;
text-align: left;
}
}
.lt-ie9 h1 {
font-size: 24px;
text-align: left;
}
h1 {
font-size: 14px;
text-align: center;
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 24px;
text-align: left;
}
}
.lt-ie9 h1 {
font-size: 24px;
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.