CODEWITHSUNDEEP
cssmedia-queries
Naor
Naor

Reputation: 24113

Force media query to be applied

I have this html and css code:

<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
</div>

@media all and (max-width: 400px), (max-height: 300px) {
    .wrapper .a {
        ....
        ....
    }
    wrapper. .b {
        ....
        ....
    }
    ....
    ....
}

Now I want that whenever wrapper gets the class "like-small", all the styles of small screen will apply even if the screen is not small. I don't want to duplicate the css code inside the media query. How can I solve that?

Another solution is to force media query to apply. Is there any way to do it?

Upvotes: 14

Views: 10279

Answers (6)

Divins Mathew
Divins Mathew

Reputation: 3186

And after almost a decade, we have a native solution in the form of CSS container queries.

Upvotes: 0

Fernando
Fernando

Reputation: 1298

You can try with javascript. This sentence sets the viewport width and forces browser to apply your media query:

$('meta[name="viewport"]').prop('content', 'width=400');

This is taken from this answer: https://stackoverflow.com/a/20137580/1401341 As someone says in the comments, this will work only with browsers which support viewport tag.

Upvotes: 4

disinfor
disinfor

Reputation: 11558

I know this question is old, but hopefully this is what you were looking for (as there wasn't an answer). And I also don't know if adding a specificity class to your CSS broke your requirement not to repeat CSS.

You can achieve what you want to do by changing the definition of your @media query. Basically, instead of saying you want something to happen when the screen gets smaller than a value, keep your small screen CSS OUT of the media query and have your media queries set up for larger screens.

Then, you just need to change the order that you call the CSS and add specificity to the styles where you want to call the class like-small.

HTML:

<div class="wrapper like-small">
    <div class="a"></div>
    <div class="b"></div>
</div>


<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
</div>

CSS:

.wrapper.like-small .a,
.wrapper .a {
        height:200px;
        width:200px;
        background:purple;
    }

.wrapper.like-small .b,
    .wrapper .b {
       height:200px;
       width:200px;
       background:blue;
 }

@media all and (min-width: 400px), (min-height: 300px) {
    .wrapper .a {
        height:100px;
        width:100px;
    background:yellow;
    }
    .wrapper .b {
       height:100px;
        width:100px;
    background:red;
    }
}

And the fiddle: http://jsfiddle.net/disinfor/70n37hhj/

Hopefully this is what you were after (over a year and a half ago :)

Upvotes: 0

wwwmarty
wwwmarty

Reputation: 858

You can do something like this with a bit of javascript.

In a nutshell, you'll move your media queries out of the css, and test them in JS using window.matchMedia.

When you know which one matched, you can add a className to the <html> tag, similar to the way Modernizr works. So on a phone you'd see <html class="like-small">.

Your css will be written to take advantage of those convenience classes, rather than using the native media query:

.like-small wrapper.a {}
.like-large wrapper.a {}

(I also like to add .not-like-small, .not-like-medium classes to <html> as well, to further simplify the css)

So now, after the regular media query is matched and the appropriate classname is appended to the document, RWD works pretty much as normal. And if you want to force a particular style you can just rewrite the classNames on the HTML tag to affect the entire page, or add a className to any parent element to affect only part of the page.

Upvotes: 1

zedd45
zedd45

Reputation: 2171

In newer versions of Chrome you can "emulate" a mobile device in order to trigger / test your media queries in a desktop browser. (Internet Exploder 11 has the same behavior!) You may have to refresh the browser after applying the emulation; Chrome 35 still partially applies the media queries until I hit refresh in the associated tab.

Upvotes: 0

Axente Paul
Axente Paul

Reputation: 553

Add the same class for those sections.

<div class="wrapper">
    <div class="makeMeShine a"></div>
    <div class="makeMeShine b"></div>
</div>

Where a and b can have their own custom styles :)

Upvotes: -3

Related Questions