Force media query to be applied

Asked 27/3, 2013 at 9:37 Answered 16/12, 2023 at 19:33

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?

Laryngitis answered 27/3, 2013 at 9:37 Comment(7)

Maybe with less. – Dreyfus 27/3, 2013 at 9:39

@JaredFarrish: Even with less, sass or stylus the rendered css will be duplicated. – Laryngitis 27/3, 2013 at 10:5

Interesting question, is it only for debug purpose ? – Crossness 27/3, 2013 at 11:14

If you want to force media query to apply for debugging, you can do in it in Chrome. (dev tools, configuration, overrides). – Crake 27/3, 2013 at 14:46

@vals: And in production? :) – Laryngitis 28/3, 2013 at 13:58

I don't know how to do it in production, sorry. I was just comenting that in the line of what zessx said – Crake 28/3, 2013 at 14:30

Here you can see one possible option how to do it: codepen.io/aduth/pen/vYYRwNw – Harrovian 27/11, 2020 at 9:36

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://mcmap.net/q/546588/-possible-to-disable-media-queries-or-force-a-resolution-reason-allow-an-iphone-to-see-the-desktop-site As someone says in the comments, this will work only with browsers which support viewport tag.

Ptarmigan answered 17/5, 2016 at 8:35 Comment(0)

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.

Hydrophone answered 23/10, 2014 at 14:48 Comment(0)

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.

Millepore answered 15/7, 2014 at 14:10 Comment(0)

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 :)

Tronna answered 23/10, 2014 at 15:11 Comment(0)

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

Jamboree answered 16/12, 2023 at 19:33 Comment(0)

-3

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 :)

Huntsville answered 27/3, 2013 at 9:41 Comment(2)

makeMeShine is just a class that I added. for instance .makeMeShine{ background: red; } . Eveywhere the class makeMeShine is applied you'll have background red. – Huntsville 27/3, 2013 at 11:25

Axente Paul definitely didn't understood your question. – Crossness 27/3, 2013 at 14:56

Recommended topics

Hot tags