CODEWITHSUNDEEP
css
David Genger
David Genger

Reputation: 915

Triggering styles that apply with a different selector, via media queries

The code I have is as follows:
there is one HTML that have two views, a list view and a card view and the user can choose whichever he/she prefers. when the user clicks card view I add a class card view to a parent element and I trigger css for that selector for example list view will be .order{} card view will be .card_view .order{} now I want to make that when mobile (with media queries) it should only apply the card view.

If someone can help I'll appreciate it, thanks in advance.

Upvotes: 0

Views: 51

Answers (1)

hungerstar
hungerstar

Reputation: 21685

.order,
.card_view {
    /* same properties for both CSS selectors - both will look the same */
    color: white;
    background-color: #ddd;
}    
@media( min-width: 480px ) {
    .order {
       /* override styles for larger screens for this CSS selector - different looks */
       color: red;
    }
}

Any viewport less than 480px wide would use the same styles for .order and .card_view since they have the same definition. At 480px and above, .order would use the re-defined styles in the media query and they now have different definitions and will be styled differently.

Upvotes: 1

Related Questions