He arreglado una web que hice hace varios años con html, php y mysql. La tengo en localhost y llevo idea de colgarla en algún servidor gratuito. El problema es que en pantalla completa se ve bien, pero al restaurar la cabecera se reduce bien, pero las tablas que hay en los bodys de las diferentes páginas no se reducen y salen cortadas. He visto por ahí que colocando el código de Google Amp se mejora la calidad, pero en mi caso no mucho. No sé por donde empezar para hacer mi web responsive. Gracias por anticipado. Este es el header:
<!DOCTYPE html>
<html amp lang="es">
<?php $user=current_user(); ?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
<title><?php if(!empty($page_title))
echo remove_junk($page_title);
elseif(!empty($user))
echo ucfirst($user['name']);
else echo "Eutiquio Charcutería"; ?>
</title>
<link rel="canonical">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<link rel="stylesheet" href="libs/css/main.css"/>
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script src="DataTables/datatables.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<?php if($session->isUserLoggedIn(true)): ?>
<header id="header">
<div class="logo pull-left" style="text-decoration:none;color:red;background-color:yellow;">
<a href="home.php" style="text-decoration:none;color:red;">
<font size="4">Eutiquio Charcutería</font>
</a>
</div>
<div class="header-content">
<div class="header-date pull-left">
<strong><?php echo date("d/m/Y g:i a"); ?></strong>
</div>
<div class="pull-right clearfix">
<ul class="info-menu list-inline list-unstyled">
<li class="profile">
<a href="#" data-toggle="dropdown" class="toggle" aria-expanded="false">
<img src="uploads/users/<?php echo $user['image']; ?>" alt="user-image" class="img-circle img-inline">
<span><?php echo remove_junk(ucfirst($user['name'])); ?> <i class="caret"></i></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="profile.php?id=<?php echo (int)$user['id']; ?>">
<i class="glyphicon glyphicon-user"></i>
Perfil
</a>
</li>
<li>
<a href="edit_account.php" title="edit account">
<i class="glyphicon glyphicon-cog"></i>
Configuración
</a>
</li>
<li class="last">
<a href="logout.php">
<i class="glyphicon glyphicon-off"></i>
Salir
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div class="sidebar">
<?php
if($user['user_level']==='1'):
include_once('admin_menu.php');
elseif($user['user_level']==='2'):
include_once('special_menu.php');
elseif($user['user_level']==='3'):
include_once('user_menu.php');
endif;
?>
</div>
<?php endif; ?>
<div class="page">
<div class="container-fluid">
Y esta es la primera página que aparece con las tablas cortadas:
<?php
$page_title='Panel de Control';
require_once('includes/load.php');
page_require_level(1);
?>
<?php
$c_categorie=count_by_id('categories');
$c_product=count_by_id('products');
$c_employee=count_by_id('employees');
$c_user=count_by_id('users');
$suppliers=find_all_supplier();
$clients=find_all_client();
$products_sold=find_higest_saleing_product('5');
$recent_products=find_recent_product_added('5');
$recent_sales=find_recent_sale_added('5');
$recent_purchases=find_recent_purchase_added('5');
?>
<?php include_once('layouts/header.php'); ?>
<div class="row">
<div class="col-md-6">
<?php echo display_msg($msg); ?>
</div>
</div>
<center><img src="libs/images/logo.jpg" alt="logo"></center><br>
<div class="row">
<div class="col-md-4">
<div class="panel panel-box clearfix">
<a href="users.php">
<div class="panel-icon pull-left bg-green">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top"><?php echo $c_user['total']; ?></h2>
<p class="text-muted">USUARIOS</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-box clearfix">
<a href="categorie.php">
<div class="panel-icon pull-left bg-red">
<i class="glyphicon glyphicon-list"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top"><?php echo $c_categorie['total']; ?></h2>
<p class="text-muted">CATEGORÍAS</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-box clearfix">
<a href="product.php">
<div class="panel-icon pull-left bg-blue">
<i class="glyphicon glyphicon-shopping-cart"></i>
</div>
<div class="panel-value pull-right">
<h2 class="margin-top"><?php echo $c_product['total']; ?></h2>
<p class="text-muted">PRODUCTOS</p>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th"></span>
<span>ÚLTIMAS VENTAS</span>
</strong>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="text-center" style="width: 50px;">#</th>
<th>Producto</th>
<th>Fecha</th>
<th>Venta total</th>
</tr>
</thead>
<tbody>
<?php foreach ($recent_sales as $recent_sale): ?>
<tr>
<td class="text-center"><?php echo count_id(); ?></td>
<td>
<a href="edit_sale.php?id=<?php echo (int)$recent_sale['id']; ?>">
<?php echo remove_junk(first_character($recent_sale['name'])); ?></a>
</td>
<td><?php echo remove_junk(read_date($recent_sale['date'])); ?></td>
<td><?php echo remove_junk(first_character($recent_sale['price'])); ?> €</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th"></span>
<span>PRODUCTOS MÁS VENDIDOS</span>
</strong>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Título</th>
<th>Total vendido</th>
<th>Cantidad total</th>
<tr>
</thead>
<tbody>
<?php foreach ($products_sold as $product_sold): ?>
<tr>
<td><?php echo remove_junk(first_character($product_sold['name'])); ?></td>
<td><?php echo (int)$product_sold['totalSold']; ?></td>
<td><?php echo (int)$product_sold['totalQty']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th"></span>
<span><a href="suppliers.php">PROVEEDORES</a></span>
</strong><!--PROVEEDORES MÁS UTILIZADOS-->
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Nombre</th>
<th>Población</th>
<th>Teléfono</th>
<th>Descripción</th>
<tr>
</thead>
<tbody>
<?php foreach ($suppliers as $supplier): ?>
<tr>
<td><?php echo remove_junk($supplier['nombre']); ?></td>
<td><?php echo remove_junk($supplier['poblacion']); ?></td>
<td><?php echo remove_junk($supplier['telefono']); ?></td>
<td><?php echo remove_junk($supplier['descripcion']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th"></span>
<span>ÚLTIMAS COMPRAS</span>
</strong>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="text-center" style="width: 50px;">#</th>
<th>Producto</th>
<th>Fecha</th>
<th>Compra total</th>
</tr>
</thead>
<tbody>
<?php foreach($recent_purchases as $recent_purchase): ?>
<tr>
<td class="text-center"><?php echo count_id(); ?></td>
<td>
<a href="edit_purchase.php?id=<?php echo (int)$recent_purchase['id']; ?>">
<?php echo remove_junk(first_character($recent_purchase['name'])); ?></a>
</td>
<td><?php echo remove_junk(read_date($recent_purchase['date'])); ?></td>
<td><?php echo remove_junk(first_character($recent_purchase['price'])); ?> €</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th"></span>
<span>PRODUCTOS RECIENTEMENTE AÑADIDOS</span>
</strong>
</div>
<div class="panel-body">
<div class="list-group">
<?php foreach ($recent_products as $recent_product): ?>
<a class="list-group-item clearfix" href="edit_product.php?id=<?php echo (int)$recent_product['id']; ?>">
<h4 class="list-group-item-heading">
<?php if($recent_product['media_id']==='0'): ?>
<img class="img-avatar img-circle" src="uploads/products/no_image.jpg" alt=""/>
<?php else: ?>
<img class="img-avatar img-circle" src="uploads/products/<?php echo $recent_product['image']; ?>" alt=""/>
<?php endif; ?>
<?php echo remove_junk(first_character($recent_product['name'])); ?>
<span class="label label-warning pull-right">
<?php echo (int)$recent_product['sale_price']; ?> €
</span>
</h4>
<span class="list-group-item-text pull-left"> 
<?php echo remove_junk(first_character($recent_product['categorie'])); ?>
</span>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th"></span>
<span><a href="clients.php">CLIENTES</a></span>
</strong><!--CLIENTES MÁS UTILIZADOS-->
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Nombre</th>
<th>Población</th>
<th>Teléfono</th>
<th>Descripción</th>
<tr>
</thead>
<tbody>
<?php foreach ($clients as $client): ?>
<tr>
<td><?php echo remove_junk($client['nombre']); ?></td>
<td><?php echo remove_junk($client['poblacion']); ?></td>
<td><?php echo remove_junk($client['telefono']); ?></td>
<td><?php echo remove_junk($client['descripcion']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include_once('layouts/footer.php'); ?>
En el css, coloqué esto al principio:
.column{
width:100%;
}
@media(min-width:600px){
.column{
width:50%;
}
}
body{
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight:400;
overflow-x:hidden;
overflow-y:auto;
background:#f1f2f7;
height:100%;
width:100%;
}