jQuery mobile layout

jQuery mobile layout

Hi, this may be more of a html /css layout question but I'm using jQuery mobile so I'm wondering if there's an easier way of doing it. It's for a mobile design so I've made it that when the screen is resized the page content also resizes. 

My current problem is (given my code below): This works fine in a browser, even when resizing the window to a certain extent but when I open it on my phone it's all messed up as shown in the screenshot (Windows phone, internet explorer....). I'm not massively familiar with responsive web design is there something I'm doing wrong here?


  2. EXAMPLE.HTML
  3. <!doctype html>
  4. <html>
  5. <head>
  6.    
  7.     <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/>
  8.     <link rel="stylesheet" href="example.css"/>
  9.     <script src="js/jquery.js"></script>
  10.     <script src="js/jquery.mobile-1.4.0.min.js"></script>
  11. </head>
  12. <body>
  13.     <div data-role="page" id ="home">  

  15.         <div data-role="header" id="header" data-position="fixed"></div>
  16.         
  17.         <div data-role="content" class ="content">

  19.             
  20.             <div id="box" class="">
  21.                 <div id="small"></div>
  22.                 <p class="heading">div1</p>
  23.             </div>

  25.             <div id="box">
  26.                 <div id="small"></div>
  27.                 <p class="heading">div2</p>
  28.             </div>

  30.             <div id="box">
  31.                 <div id="small"></div>
  32.                 <p class="heading">div3</p>
  33.             </div>

  35.             <div id="box">
  36.                 <div id="small"></div>
  37.                 <p class="heading">div4</p>
  38.             </div>

  40.             <div id="box">
  41.                 <div id="small"></div>
  42.                 <p class="heading">div5</p>
  43.             </div>
  44.         </div>  
  45.     </div>
  46.  </body>
  47. </html>

  49. EXAMPLE.CSS
  50. html,body
  51. {
  52.     height:100%;
  53.     width:100%;
  54.     font-family: 'Istok Web', sans-serif;
  55.     background-color: red;
  56. }

  58. #home
  59. {
  60.     display:table;
  61.     width:100%;
  62.     height:100%;
  63. }

  65. #header
  66. {
  67.     width: 100%;
  68.     display:table-row;
  69.     height:8%;
  70. }
  71. .content
  72. {
  73.     height:100%; 
  74.     margin: 0px;
  75. padding:0px; 
  76. }

  78. #box
  79. {
  80. width:100%;
  81. height:19.5%;
  82. border: solid 1px #000000;
  83. position:relative;
  84. }

  86. #small
  87. {
  88. height: 100%;
  89. width:100px;
  90. border-left:solid 1px #000000;
  91. border-right: solid 1px #000000;
  92. float: left;
  93. } 
  95. .heading
  96. {
  97. font-size: 2em;
  98. position: absolute;
  99. margin-left: 110px;
  100. }



On my desktop (Good)                                                           On my phone (bad)