I'm facing an issue with a code snippet that's being ignored in the scoped style of a Vue component.
nav {
background: none;
box-shadow: none;
.sidenav-trigger {
background: none;
border: none;
cursor: pointer;
i {
color: #f8f9fa;
font-size: 36px;
}
}
}
}
@media (max-width: 768px) {
nav {
background: #f8f9fa;
.sidenav-trigger {
i {
color: rgba(0, 0, 0, 1);
}
}
}
}
I've tried tweaking min-width and other CSS specificity rules, but unfortunately, nothing seems to work. I've also tested different browsers to explore further, but the issue persists. The viewport tag is correctly placed in the index.html file as well. Any assistance on this matter would be greatly appreciated. Thank you.