0

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">&ensp;
                            <?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%;
}
2
  • 1
    si agregas un ejemplo de html se pueden ir viendo los cambios que podes implementar. hay varios frameworks / librerías que te pueden ayudar a resolver la "responsividad" en diferentes tamaños de pantalla usando clases css Commented el 19 mar. a las 16:34
  • 1
    Mira un curso de Bootstrap y seguro que comienzas hacer responsive tu web
    – OCHOA
    Commented el 20 mar. a las 10:40

1 respuesta 1

0

Ya encontré una solución. Lo que quería era que al hacer la ventana del navegador más pequeña pudiera ver de alguna manera mis tablas y lo he conseguido mediante la primera solución que dan en esta página: https://www.sessionstudio.com.ar/blog/2017/10/12/tablas-responsivas-tecnicas-ejemplos/

1
  • 1
    Aunque teoricamente este enlace conteste la pregunta, es preferible que incluyas las partes esenciales del mismo en la respuesta. Los enlaces pueden caducar y desaparecer. Ademas llevar al usuario a que lea en otro lugar la respuesta, no es la mejor opción.
    – gbianchi
    Commented el 20 mar. a las 19:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.