css - Remove a class property with a media query on a mobile first design? -
i have tab elements either display: inline
or none
depending if selected. eg:
<div class="tab" style="display:inline;"></div> <div class="tab" style="display:none;"></div>
then class in stylesheet overrides display property tabs shown in mobile devices:
.tab { display: block !important; }
my problem need prevent condition apply screen bigger 600px cannot use max-width queries. need override display: block !important
min-width media query without applying other particular style. eg:
@media screen , (min-width: 600px){ .tab { display: /*don't anything*/ !important; } }
if mark selected tab class name class='selected'
, can try way:
html:
<div class="tab selected">1</div> <div class="tab">2</div> <div class="tab">3</div>
css:
.tab { display: block; } @media screen , (min-width: 600px){ .tab { display: none; } .tab.selected { display: inline-block; } }
Comments
Post a Comment