Menu does not appear in the mobile version

-2

Hello everyone, I'm trying to include a page that has an external menu, requested in PHP with require, but I still tried the include, but it still has the same problem, as the screenshot below the menu only appears in the desktop version, in the chrome mobile version does not appear, does anyone have any idea what it can be?

As I said above, it is a normal page in PHP, both the print page and the menu.php, and none of the pages that the menu requires, the mobile version does not appear;

Code

<?phprequire'head.php';require'conn/conexao.php';date_default_timezone_set('America/Sao_Paulo');?><styletype="text/css">
#kit{
    position:absolute;
    width:80%;
    height:auto;
    top:50%;
    left:50%;
    margin-left:-40%;
    margin-top:-250px;
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2), 0 8px 22px 0 rgba(0, 0, 0, 0.19);
}
#escrita{
    font-family:Verdana, Geneva, sans-serif;
    font-size:30px;
    color:#333;
}
a{
    text-decoration:none;
}
a:link {
   text-decoration:none;
}
a:visited { 
    text-decoration:none;
    color:#000;
 } 
a:hover{
    text-decoration:none;
}
table.tabela{
    text-align:center;
    border-collapse:collapse;
    width:70%;
    margin-bottom:2%;
    margin-top:2%;
}
table.tabela tr td {
    border:1px outset;
    text-align:center;
}
</style>

<div id="kit" align="center"> 


<?php 

  $hora = date('H:i');
  if($hora >= '13:30' && $hora <= '22:00' ){
      $turno = 'Turno B';
  }elseif($hora >= '22:01' && $hora <= '04:59' ){
      $turno = 'Turno C';
  }else{
      $turno = 'Turno A';
  }
   ?>

<form action="" method="post">   


<table class="tabela">


<tr>
    <td colspan="8">
        <p id="escrita">Reporte de produção por turno: 
<select name="turno" style="width:100px; height:40px; font-family:Verdana, Geneva, sans-serif; font-size:17px; color:#F00;">
          <option value="<?php echo $turno; ?>"><?php echo $turno; ?></option>
          <option value="Turno A">Turno A</option>
          <option value="Turno B">Turno B</option>
          <option value="Turno C">Turno C</option>
</select>
<input type="date" value="<?php echo date('Y-m-d', strtotime('-1 day')); ?>" name="data_reporte" style="width:130px; height:35px;" />
</p>
    </td>
</tr>


<tr>
    <td>Número</td>
    <td>Máquina</td>
    <td>Grupo</td>
    <td>Agulhagem</td>
    <td>Produção</td>
    <td>Setup</td>
    <td>Pares Segunda qual.</td>
    <td>Peso Terceira qual.</td>
  </tr>


<script type="text/javascript" src="meia/js/jquery.min2.js"></script>
<script type="text/javascript" src="meia/js/jquery.wallform.js"></script>



<?php
$sql = "SELECT * FROM maquinas ORDER BY id ASC";
    $disp_sql = $mysqli->query($sql);
    while($data = $disp_sql->fetch_array())
    { 
        $num       = $data['num'];
        $maq       = $data['maq'];
        $grupo     = $data['grupo'];
        $agulha    = $data['agulha'];

?>

  <tr>
    <td><?php echo $num; ?><input type="hidden" value="<?php echo $num; ?>" name="num[]" /></td>
    <td><?php echo $maq; ?></td>
    <td><?php echo $grupo; ?></td>
    <td><?php echo $agulha; ?></td>
    <td>
    <input type="number" name="producao[]" min="0" max="500" style="width:50px;" tabindex="<?php echo $num; ?>" id="<?php echo $num; ?>" onkeyup="Enter('<?php echo ($num + 1); ?>');" />
    </td>
    <td><input type="checkbox" name="setup[]" value="s" /></td>
    <td>
    <input type="number" name="segunda[]" value="0" min="0" max="5000" style="width:50px;" id="<?php echo "1-".$num; ?>" onkeyup="Enter('<?php echo ("1-".($num + 1)); ?>');" />
    </td>
    <td>
    <input type="number" name="terceira[]" value="0" min="0" max="5000" style="width:50px;" id="<?php echo "2-".$num; ?>" onkeyup="Enter('<?php echo ("2-".($num + 1)); ?>');" />
    </td>
  </tr>


<?php } ?>  

  <tr>
    <td colspan="8"><input type="submit" value="Reportar produção" style="width:150px; margin:5px;" /></td>
  </tr>
  <input type="hidden" name="teste" value="teste" />
</form>

</table>

<script type="text/javascript">

function Enter(idinput){
    if(event.keyCode == 13){
      document.getElementById(idinput).focus();
      event.preventDefault();
      return false;
    }
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

</script>
<script type="text/javascript" src="meia/js/jquery.min2.js"></script>
<script type="text/javascript" src="meia/js/jquery.wallform.js"></script>
<script>
</script>
</div>
</body>
</html>
    
asked by anonymous 07.06.2018 / 13:14

1 answer

1

Use Media Queries in your CSS, to strip the margin-top of your div, which is getting over the menu, in the mobile version.

@media (max-width: 575.98px) {
#kit{
    top:0%;
    margin-top: 0px !important;
 }
}
    
07.06.2018 / 14:56