I have a wordpress page using the bootstrap-four theme
I can't seem to get the media breakpoints to work. At the end of my custom stylesheet (style.css) I tried:
@include media-breakpoint-down(xs) {
body {
color: red;
}
}
@media screen and (min-width: 576px) {
body {
color: red;
}
}
@media screen (min-width: 576px) {
body {
color: red;
}
}
@media (min-width: 576px) {
body {
color: red;
}
}
I made sure that <meta name="viewport" content="width=device-width, initial-scale=1"> is in the <head>...</head>
What else am I missing?
You are using the wrong @media mixin. Use @media only screen and (min-width : ---px)
Example mobile first:
https://jsfiddle.net/g8awz9g4/1/
Code:
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
Example: desktop -> mobile
https://jsfiddle.net/g8awz9g4/2/
code:
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}
