title: How to dynamically change css styling for a div according to browser screen size
body: <p>am developing an application using the jquery mobile library but i need to apply different styles to a div for desktop browsers and mobile browsers as i want to achieve the same look and feel on both platforms instead of creating different sites for them.</p>
  
  <p>This is the code i wrote for the desktop browser.</p>
  
  <pre><code>&lt;div data-role="page" id="chat"&gt;
  &lt;div data-role="header"&gt;&lt;h1&gt;Welcome to the Streamline Chat App&lt;/h1&gt;&lt;/div&gt;
  &lt;div data-role="main" class="ui-content" style="margin:500px"&gt;
  &lt;form&gt;
   &lt;label for="username" &gt;Username:&lt;/label&gt;
   &lt;input type="text" id="username"&gt;
   &lt;label for="pwd" &gt;Password:&lt;/label&gt;
   &lt;input type="password" id="pwd"&gt;
   &lt;input type="submit" data-inline="true" value="Submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>When the user is using a desktop browser, margin for the main div tag should be 500px. If they are using mobile no margin should be applied. Is there anyway this can be achieved?</p>