Why are my Media Queries not Working in WordPress Weaver Xtreme theme?

Question

I have some fairly simple code which I want to be responsive:

 <h1>Title</h1> <div class="article-image"> <img class="alignright size-full wp-image-130" src="http://example.com/my-image.jpg" /> </div> <div class="outlook-text">Article text blah blah ...</div> 

CSS Code works to put the text in a column on the left and the image on the right under the title:

 .outlook-text { float:left; width:47%; line-height:1.8em; } .article-image { float:right; width:47%; } .article-image img { width:100%; height:auto; } 

On smaller screens, I want to be able to put the image above the text and scale both divs to 100%:

 /* On screens that are 600px or less */ @media screen and (max-width: 600px) { .outlook-text { width:100%; } .article-image { width:100%; } } 

The media query has no effect. Any ideas? Must be something simple, but I'm stumped.

Answer 1

I think you made a typo in media query. It should be

    /* On screens that are 600px or less */
@media screen and (max-width: 600px)
     { 

    .outlook-text { width:100% !important; } 
    .article-image { width:100% !important; }

     }