Use media query to reduce font and img size when width is < 960px

Avoid having horizontal scrollbars.
This commit is contained in:
Louis Bailleul
2015-11-23 12:08:09 +00:00
parent 8f2ddb243d
commit 8961a5f2c1
4 changed files with 27 additions and 6 deletions

View File

@ -1776,14 +1776,30 @@ label {
max-width: 45px;
max-height: 50px;
}
.device-header-table .device_icon img {
max-width: 20px;
max-height: 20px;
}
.device-header-table img {
max-width: 115px;
max-height: 40px;
}
.device-header-table {font-size : 8px;}
.device-header-table a {font-size : 11px;}
}
@media only screen and (max-width: 720px) and (min-width: 481px) {
@media only screen and (max-width: 768px) and (min-width: 481px) {
.thumbnail_graph_table b { font-size : 8px;}
.thumbnail_graph_table img {
max-width: 60px;
max-height: 55px;
}
.device-header-table img {
max-width: 150px;
max-height: 50px;
}
.device-header-table {font-size : 10px;}
.device-header-table a {font-size : 17px;}
}

View File

@ -24,7 +24,7 @@ $image = getImage($device);
echo '
<tr bgcolor="'.$device_colour.'" class="alert '.$class.'">
<td width="40" align=center valign=middle style="padding: 21px;">'.$image.'</td>
<td width="40" align=center valign=middle style="padding: 21px;"><span class="device_icon">'.$image.'</span></td>
<td valign=middle style="padding: 0 15px;"><span style="font-size: 20px;">'.generate_device_link($device).'</span>
<br />'.$device['location'].'</td>
<td>';

View File

@ -38,8 +38,8 @@ else {
}//end if
if($_SESSION['screen_width']) {
if($_SESSION['screen_width'] >= 800) {
$graph_array['width'] = ($_SESSION['screen_width'] - 420 )/count($periods)+1;
if($_SESSION['screen_width'] > 800) {
$graph_array['width'] = ($_SESSION['screen_width'] - 400 )/count($periods)+1;
}
else {
$graph_array['width'] = $_SESSION['screen_width'] - 155;
@ -47,7 +47,12 @@ if($_SESSION['screen_width']) {
}
if($_SESSION['screen_height']) {
$graph_array['height'] = ($_SESSION['screen_height'] - 250)/4;
if($_SESSION['screen_width'] > 960) {
$graph_array['height'] = ($_SESSION['screen_height'] - 250)/4;
}
else {
$graph_array['height'] = ($_SESSION['screen_height'] - 250)/2;
}
}

View File

@ -33,7 +33,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
}
echo '<div class="panel panel-default">';
echo '<table style="margin: 0px 7px 7px 7px;" cellspacing="0" class="devicetable" width="99%">';
echo '<table class="device-header-table" style="margin: 0px 7px 7px 7px;" cellspacing="0" class="devicetable" width="99%">';
require 'includes/device-header.inc.php';
echo '</table>';
echo '</div>';