In my project, I am using a CSS library that includes the following class:
@media only screen and (max-width: 480px) {
.nav-tabs>li {
margin-bottom:3px;
}
.nav-tabs>li,
.nav-tabs>li>a {
display:block !important;
float:none !important;
border:0 !important;
background-color:rgba(0,0,0,0.01);
}
.nav-tabs>li>a :focus,
.nav-tabs>li.active>a {
background-color:rgba(0,0,0,0.05);
}
}
When the screen size is less than 480px, the layout of the li elements changes as per this class.
I want to customize the behavior when the screen size is smaller than 280px but do not want to modify the original library file. So, I copied and pasted the class below into my custom CSS file:
@media only screen and (max-width: 280px) {
.nav-tabs>li {
margin-bottom:3px;
}
.nav-tabs>li,
.nav-tabs>li>a {
display:block !important;
float:none !important;
border:0 !important;
background-color:rgba(0,0,0,0.01);
}
.nav-tabs>li>a :focus,
.nav-tabs>li.active>a {
background-color:rgba(0,0,0,0.05);
}
}
However, despite adding the customized class, the default behavior persists and the li elements' layouts change only when the screen size is smaller than 480px.
Any suggestions on why my attempt to override the CSS class was unsuccessful?