CODEWITHSUNDEEP
css
lisovaccaro
lisovaccaro

Reputation: 33946

Remove a class property with a media query on a mobile first design?

I have tab elements with either display: inline or none depending if they are selected. Eg:

<div class="tab" style="display:inline;"></div>
<div class="tab" style="display:none;"></div>

Then a class in my stylesheet overrides the display property so that all tabs are shown in mobile devices:

.tab {
display: block !important;
}

My problem is that I need to prevent this condition to apply to screen bigger than 600px but I cannot use max-width queries. So I need to override display: block !important with a min-width media query without applying any other particular style. Eg:

@media screen and (min-width: 600px){
.tab  {
display: /*don't do anything*/ !important; 
}
}

Upvotes: 4

Views: 38587

Answers (3)

Vahid Hallaji
Vahid Hallaji

Reputation: 7447

If you mark selected tab by class name class='selected', can try this way:

HTML:

<div class="tab selected">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

CSS:

.tab {
    display: block;
}

@media screen and (min-width: 600px){
    .tab  {
        display: none;
    }
    .tab.selected {
        display: inline-block;
    }
}

See demo

Upvotes: 9

apaul
apaul

Reputation: 16170

I think it is better to avoid using inline styles and !important whenever possible try something like:

Working Example

HTML

<div class="tab selected">Hello world!</div>
<div class="tab">Good bye world!</div>

CSS

.tab {
    display: inline-block;
}
@media screen and (min-width: 600px) {
    .tab {
        display: none;
    }
    .selected {
        display:inline-block;
    }
}

Upvotes: 1

Minide
Minide

Reputation: 305

First of all: do not use style="" on your HTML. You cannot override the css attributes from an external CSS, even using !important.

I recommend you using only external CSS files, then, let's say you want to override attributes the thing would come this way:

.tab {
display: inline;
}

@media screen and (min-width: 600px){
.tab {
display: block, inline or none;
}
}

Upvotes: -1

Related Questions