javascript sets divs to style.width = 50%

Write a Javascript for a Wordpress blog, triggered by [login to view URL] or [login to view URL], and is re-triggered whenever the [login to view URL] that finds all divs with classes "myBigQuote" and "myBigQuoteRight", and sets their DOM property [login to view URL] to 100% if the window is narrower than 400 pixels, and sets to width 50% if the window is wider than 399px. Please do not tell me to use CSS3 and @media! The situation is that my Wordpress responsive theme is Genesis + Dynamik Website builder, has responsive settings with @media steps that set all divs to width=100% when window width is 1100px or less. I chose to leave these as-is. Instead, for a just few graphic elements like <div class="myBigQuote" style="width:50%">Hello World</div> You see I am manually setting a style of width:50%, which over-rides the @media. Now I need the javascript to adjust those style="width:50%". Here is my class myBigQuote, which deliberately doesn't use width:50%, because it gets overridden by @media statements anyway. .myBigQuote { font-family: 'PT Sans', 'sans-serif'; font-weight:400; font-size: 2.5em; /* this size gets changed by @media statements at the bottom of this file. */ line-height: 1.25; font-style: italic; letter-spacing: 1px; text-shadow: 2px 2px 6px #A3A3A3; padding-right:10px; position: relative; float:left; } I tried putting my own series of @media statements setting the widths, but the Genesis+Dynamik CSS are taking priority.