title: How to auto adjust the div size for all mobile / tablet display formats?
body: <p>I have designed a page where four <code>div</code> tags are there in the page. If I test the page in mobile phone (5 inch) it fits the page perfectly, If I test the same page in tablet the page fits with in 30% of the screen. So how can I set the <code>div</code> size so that it will fit for all type of screens.</p>
  
  <p><a href="http://jsfiddle.net/Ramaganiprasad/e0j9gjjy/">Fiddle link</a></p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="bubble0" align="center"&gt;
       &lt;h3&gt;Three  Levels &lt;/h3&gt; 
    &lt;/div&gt;
    &lt;div class="bubble"  align="center"&gt; &lt;/div&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;div class="bubble1" align="center"&gt; &lt;/div&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;div class="bubble2" align="center"&gt; &lt;/div&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;button&gt;Play&lt;/button&gt;
  </code></pre>
  
  <p>Any suggestions please,</p>