Note: I'm using the Boostrap 3 framework
On the desktop screen it's fine:
But on a mobile device it does not appear at the end:
This is the html code I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Productos</title>
<?php include 'includes/head_comun.php'; ?>
</head>
<?php include 'includes/encabezado.php'; ?>
<div class="container" >
<br><br>
<div class="panel panel-success">
<div class="panel-heading" align="center"><h3>PRODUCTOS</h3>
</div>
<br>
<div class="panel-body">
<div class="row" align="center">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#nuevo"><span class="glyphicon glyphicon-user"></span>
Nuevo Producto
</button>
</div>
<br>
<div class="table-responsive">
<table id="grid" class="table table-hover table-condensed nowrap dt-responsive table-bordered" cellpadding="0">
<thead>
<tr class="active">
<th>Codigo</th>
<th >Nombre</th>
<th>Cantidad</th>
<th>Valor Unitario</th>
<th>Valor</th>
<th>Kardex</th>
<th>Opciones</th>
</tr>
</thead>
<?php
foreach($matrizProductos as $producto): ?>
<tr>
<td><?php echo $producto["cod_producto"]?></td>
<td><?php echo $producto["nombre"]?></td>
<td><?php echo $producto["cantidad"]?></td>
<td><?php echo $producto["valor_unitario"]?></td>
<td><?php echo $producto["valor"]?></td>
<td><a href="vista/ver_movimientos.php?id_producto=<?php echo $producto["id_producto"]?>">Ver Movimientos</a>
<a href="vista/frm_movimiento.php?id_producto=<?php echo $producto["id_producto"] ?>"><input type="button" value="Acción" class="btn btn-warning"></a>
</td>
<td>
<a href="vista/frm_editar.php?id_producto=<?php echo $producto["id_producto"]?>"><input type='button' name='edi' value='Editar' class="btn btn-info"></a>
<a href="modelo/borrar.php?id_producto=<?php echo $producto["id_producto"]?>"><input type='button' name='del' value='Eliminar' class="btn btn-danger"></a>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<!-- Modal new -->
<div class="modal fade" id="nuevo" tabindex="-1" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Nuevo Producto</h4>
</div>
<div class="modal-body">
<form role="form" style="margin:0 auto" class="form-horizontal" method="POST" action="modelo/insertar.php">
<div class="form-group" >
<label class="col-sm-2 control-label">Codigo</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="cod" placeholder="Ingrese Codigo" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nomb" placeholder="Ingrese nombre" required>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="agregar" class="btn btn-success">Agregar</button>
<button type="reset" name="limpiar" class="btn btn-primary">Limpiar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
<!--end modal new--> </div>
This is the code of piePagina.php:
<footer >
<h4 class="muted credit" id="pie">© <?php echo date('Y');?> <a href="https://www.instagram.com/juanzu10/" style="text-decoration: none;" id="sincolor" target="_blank"> - Juanzu. </a></h4>
</footer>
CSS Code:
html, body{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro',
'Helvetica Neue',
Helvetica, Arial, sans-serief;
}
.navbar{
margin-bottom: 0;
}
th{
text-align: center;
}
td{
text-align: center;
}
footer {
height:50px;
line-height:50px;
background:black;
color:white;
text-align:center;
position:absolute;
bottom:0;
left:0;
width:100%;}
#sincolor{
color: #086108;
}
@media screen and (max-width: 768px){
.post .thumb {
width: 100%;
margin-bottom: 20px;
margin-right: 0;
}
}