Why does modify CSS Rule fails when a media query has updated it

Question

<head>
    <style>
        .cdm-tb { width: 960px; height: 90px; }
    </style>

    <script>
        ChangeCssRule(".cdm-tb", "width", "468px");
        ChangeCssRule(".cdm-tb", "height", "60px");
    </script>
</head>

<body>

    <img src='images/testimage.jpg' class='cdm-tb' alt='test' />

</body>

ChangeCssRule is a JS function that works. But when I add a couple media queries to the .cdm-tb style, updating the CSS rules no longer works.

    <style>
        .cdm-tb { width: 960px; height: 90px; }
        @media(min-width: 728px) {.cdm-tb { width: 728px; height: 90px; } }
        @media(min-width: 960px) {.cdm-tb { width: 960px; height: 90px; } }
    </style>

Is there an order of execution concerning media queries I am not understanding? Any suggestions would be appreciated.

I am not familiar with jsfiddle enough to do it. Here is a test: pcbuilderplus.com/test/index.html and pcbuilderplus.com/test/index2.html with the media queries added. — Vincent James
– Vincent James, Commented Sep 23, 2013 at 17:13

Ankit Agrawal · Accepted Answer · 2013-09-23 17:58:13Z

1

<html>
<head>
<meta name="viewport" content="width=device-width">

</head>
<style>
body{background:#000000;}
.cdm-tb { width: 960px; height: 90px; }
@media screen (min-width: 728px)
{
.cdm-tb { width: 728px; height: 90px;}
}

@media screen (min-width: 960px)
{
.cdm-tb { width: 960px; height: 90px;}
}
</style>
<img src='images/testimage.jpg' class='cdm-tb' alt='test' />

</html>

you have to add meta tag view port for responsive design

edited Sep 23, 2013 at 17:58

answered Sep 23, 2013 at 17:37

Ankit Agrawal

6,1246 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:20:21Z

0

I wasn't able to modify the existing media query values but I did find a work around here: Generating CSS media queries with javascript or jQuery. The work around was to just append a brand new media query on the end of the < STYLE> tag to override any previous settings that were applied:

document.querySelector('style').textContent += 
           "@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Sep 23, 2013 at 21:54

Vincent James

1,1583 gold badges18 silver badges27 bronze badges

Collectives™ on Stack Overflow

Why does modify CSS Rule fails when a media query has updated it

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related