I have a layout with Bootstrap. MY problem is that I cannot get the same output on every monitor. In a portable pc the output is different than on a regular monitor.
I have already changed from container to container-fluid but still cannot get the same output on every monitor. Is it possible to read the screen resolution and adjust the code to it?
This is my code:
<body style="overflow: hidden; height: 100%;">
<?php
include ($_SERVER['DOCUMENT_ROOT']."/include/Menu.php");
?>
<div class="jumbotron" style="border-bottom: solid 3px rgb(132, 177, 161);">
<div class="container-fluid">
<div class="row">
<div class="col-md-1" style="padding-left:0px">
<button id="New" type="button" class="btn btn-default btn-sm ButtonEWG">
<img id="ButtonIcon" src="/img/icons/plus.png" style="padding-right: 10px;">
New
</button>
</div>
<div class="col-md-1">
<button id="New" type="button" class="btn btn-default btn-sm ButtonEWG">
<img id="ButtonIcon" src="/img/icons/excel.png" style="padding-right: 10px;">
Export
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid viewport" style="padding: 0px;">
<div class="row thick" style="border-bottom: solid 3px rgb(132, 177, 161); margin: 0px; padding: 0px;">
<div class="col-md-6" style="height: 100%; padding: 0px; border-right: solid 3px rgb(132, 177, 161); border-left: solid 3px rgb(132, 177, 161)">
<div id="OccurrencesGrid" style="border: none"></div>
</div>
<div class="col-md-6">
<div id='DetailsTabs'style="margin-top:10px; border:none">
<ul>
<li style="margin-left: 30px;">Occurrence Details</li>
<li>Occurrence status overview</li>
</ul>
<div style="padding-top:20px; background-color:#F5F5F5;">
<div id='OccurrenceDetails'></div>
</div>
<div style="padding-top:20px; background-color:#F5F5F5">
<div class = "row">
<div class = "col-md-4"><div class="alert alert-info" role="alert" style="background-color: #F5F5F5;">Opening</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-info" role="alert">N/A</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-success" role="alert"><?php echo $StatusGrid[0];?></div></div>
<div class = "col-md-2" align="center"><div class="alert alert-warning" role="alert">N/A</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-danger" role="alert"><?php echo $StatusGrid[1];?></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid thin" style="padding-top: 10px;">
<div class="col-md-2">
<div id="LeftDonut" style="height:250px;"></div>
</div>
</div>
</div> <!-- /container -->
