I recently created a weather page that functions well in landscape mode, but I am facing challenges getting it to work smoothly in portrait mode. Currently, the page is only optimized for normal screens.
Here's the script I've developed using bootstrap:
<div class="col-md-12 col-sm-12">
<div class="col-md-1 col-sm-1"></div>
<?php
foreach ($xml->forecast->time as $day) {
$dt = strtotime($day['day']);
echo
'<div class="col-md-2 col-sm-2" style="min-height: 80vh; float: left;">
<div class="col-md-12 col-xs-12 col-sm-12">
<h3 style="font-size: 2.7vw; text-align: center;"><a href="#">' . date("l", $dt) . '</a></h3>
</div>
<div class="col-md-12 col-xs-12 col-sm-12">
<img src="images/' . $day->symbol['var'] . '.png" alt="icon" style="max-width: 90%;">
</div>
<div class="col-md-12 col-xs-12 col-sm-12" style="margin-top: 15px;">
<h1 style="font-size: 10vh; float: left;">' . floor($day->temperature['day']) . '°</h1>
<br>
<h5 style="font-size: 5vh; float: right; margin-top: 10vh;"> ' . floor($day->temperature['min']) . '°</h5>
</div>
</div>';
}
?>
<div class="col-md-1 col-sm-1"></div>
</div>
The issue arises when viewing this on an Android Xibo player in portrait mode:
I aim to have a similar layout to the landscape version where each day is displayed without the need for scrolling. The main challenge I'm encountering is adjusting the height of the content appropriately for optimal display. Both images within the page are in full HD resolution.