Question: I have designed a page where four `div` 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 `div` size so that it will fit for all type of screens.

[Fiddle link](http://jsfiddle.net/Ramaganiprasad/e0j9gjjy/)

HTML:

```
  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

```

Any suggestions please,

Answer: 
You can use the viewport height, just set the height of your div to `height:100vh;`, this will set the height of your div to the height of the viewport of the device, furthermore, if you want it to be exactly as your device screen, set the margin and padding to 0.

Plus, It will be a good idea to set the viewport meta tag:

`<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />`

Please Note that this is relatively new and is not supported in IE8-, take a look at the support list before considering this approach (<http://caniuse.com/#search=viewport>).

Hope this helps.
[Fiddle](http://jsfiddle.net/e0j9gjjy/5/)
=========================================

You want to set height which may set for all devices?

Decide upon the design of the site i.e Height on various devices.

Ex: 

* `Height-100px` for bubbles on device with `-min-width: 700px`.
* `Height-50px` for bubbles on device with `< 700px`;

Have your css which has height 50px;

and add this media query

```
  @media only screen and (min-width: 700px) {
    /* Styles */
    .bubble {
        height: 100px;
        margin: 20px;
    }
    .bubble:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble1 {
        height: 100px;
        margin: 20px;
    }
    .bubble1:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble1:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble2 {
        height: 100px;
        margin: 20px;
    }
    .bubble2:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble2:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
}

```

This will make your bubbles have Height of 100px on devices greater than 700px and a margin of 20px;