Currently, I am working on a small project utilizing Boostrap 3 (html5boilerplate custom build) and attempting to incorporate the "official" media queries as outlined in the Bootstrap documentation:
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
However, it appears that the media queries (@screen-sm, screen-md, screen-lg) do not seem to be recognized. Despite searching through the Bootstrap files, I am unable to locate any references.
In my sample code (main.css):
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {
.header-btn {display: none;}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {
.slogan {display: none;}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}
As of now, nothing seems to be happening!
Upon checking in Chrome, I encountered the following errors:
Do you have any insights or suggestions regarding this issue?