I've just created a new theme that extends from Magento Blank, and within the file _theme.less I did something like this:
h1 {
font-size: 24px;
}
@media (max-width: 768px) {
h1 {
font-size: 18px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 12px;
}
}
However, the mobile styles are not being applied. I opened the styles-m.css source code and I found out that the desktop styles are at the bottom, overriding all of the styles above them.
@media (max-width: 480px) {
h1 {
font-size: 12px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 18px;
}
}
h1 {
font-size: 24px;
}
What am I doing wrong here?