Tema: Problema con web responsive
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/12/2017, 03:37
sergiodueso
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 13 años, 3 meses
Puntos: 1
Problema con web responsive
Buenos días, tengo este código:

<
Código HTML: 
Ver original
  1. !DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.   <title>Cafetería-Bar Tonik</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="css/bootstrap.min.css">
  8.   <link href="css/bootstrap-theme.css" rel="stylesheet">
  9.   <script type="text/javascript" src="js/jquery.min.js"></script>



Código CSS: 
Ver original
  1. <style>
  2.   
  3.   @import url('https://fonts.googleapis.com/css?family=Lobster');
  4.   body {
  5.     font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  6.     -webkit-background-size: cover;
  7.     -moz-background-size: cover;
  8.     background-size: cover;
  9.     -o-background-size: cover;
  10. }
  11.   #inicio {padding-top:40px;height:700px;}
  12.   #carta {padding-top:50px;height:700px; overflow:auto;}
  13.   #galeria {padding-top:50px;height:700px; overflow:auto;}
  14.   #menu {padding-top:50px;height:700px;}
  15.   #contacto {padding-top:50px;height:700px;}
  16.   .display-3
  17.   {
  18.       text-align:center;
  19.       font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  20.      color: #e0dfdc;
  21.   
  22.   letter-spacing: .1em;
  23.   text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
  24. }
  25. .direccion
  26. {
  27.     text-align:center;
  28.       font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  29.      color: #e0dfdc;
  30.   
  31.   letter-spacing: .1em;
  32.   text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
  33. }
  34. .col-centrada{
  35.     float: none;
  36.     margin: 0 auto;
  37.     font-family: 'Lobster', cursive;
  38. }
  39.  
  40. </style>

Código HTML: 
Ver original
  1. </head>
  2. <body data-spy="scroll" data-target=".navbar" data-offset="50">
  3.  
  4. <nav class="navbar navbar-inverse navbar-fixed-top" style="font-family: 'Lobster', cursive; font-size:20px;">
  5.   <div class="container-fluid">
  6.     <div class="navbar-header">
  7.         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  8.           <span class="sr-only">Menú</span>
  9.           <span class="icon-bar"></span>
  10.           <span class="icon-bar"></span>
  11.           <span class="icon-bar"></span>                        
  12.       </button>
  13.       <a class="navbar-brand" href="#">Menú</a>
  14.     </div>
  15.     <div>
  16.       <div class="collapse navbar-collapse" id="myNavbar">
  17.         <ul class="nav navbar-nav">
  18.           <li class="active"><a href="#inicio">Inicio</a></li>
  19.           <li><a href="#carta">Carta</a></li>
  20.           <li><a href="#galeria">Galería</a></li>
  21.           <li><a href="#menu">Menu Especial</a></li>
  22.           <li><a href="#contacto">Contacto</a></li>
  23.         </ul>
  24.       </div>
  25.     </div>
  26.   </div>
  27. </nav>    
  28.  
  29. <div id="inicio" class="container-fluid" style="background-color:#804040;">
  30.     <div class="jumbotron" style="background-color:#804040;">
  31.         <h1 class="display-3">Cafetería Tonik</h1>
  32.         <p class="direccion">Avda. Puerta de Sancho, 12 - Zaragoza</p>
  33.     </div>
  34.     
  35.     <div class="row">
  36.         <div class="col-sm-4">
  37.             <p> Esto es para probar </p>
  38.         </div>
  39.         <div class="col-sm-4">
  40.             <img class="center-block" alt="Bootstrap Image Preview" width="450px" src="fondo/Cafeteria-tonik-fondo-transparente-sin-letra.png">
  41.         </div>
  42.         <div class="col-sm-4">
  43.             <p> Esto es para probar </p>
  44.         </div>
  45.     </div>
  46. </div>
  47.  
  48. <div id="carta" class="container-fluid" style="background-color:#000;">
  49. <div class="col-sm-12">
  50.     <p style="font-family: 'Lobster', cursive; font-size:58px; text-align:center; color:#C63;">Carta</p>
  51.     <br>
  52. </div>
  53. <div class="container-fluid">
  54.         <div class="col-sm-12 col-centrada">
  55.         <table class="table">
  56.          <tr>
  57.             
  58.          </tr>

Código HTML: 
Ver original
  1. <?php
  2.      include ("cafeteria_tonik_conexion.php");
  3.      $mi_id = 0;
  4.      
  5.  $consulta1 = "SELECT * FROM secciones_carta";
  6.  $resultado = mysqli_query($cafeteria_tonik_conexion, $consulta1);
  7.  while ($fila=mysqli_fetch_array($resultado))
  8.  {
  9.      
  10.      echo '<thead style="font-size:25px; color:#093;">
  11.     <tr>
  12.       <th>'.$fila['seccion_carta'].'</th>
  13.     </tr>
  14.   </thead>';
  15.     
  16.     $consulta2 ="SELECT * FROM platos WHERE id_secciones = '".$fila['id_secciones_carta']."'";
  17.     $resultado2 = mysqli_query($cafeteria_tonik_conexion, $consulta2);
  18.     while ($fila2=mysqli_fetch_array($resultado2))
  19.     {
  20.         if ( $fila2['id_secciones'] == 1 or $fila2['id_secciones'] == 2 or $fila2['id_secciones'] == 3 or $fila2['id_secciones'] == 7)
  21.         {
  22.             echo '<tr style="color:#FFF; font-size:20px;">
  23.                         <td style="color:#C63;">'.$fila2['titulo'].'</td>
  24.                         <td>'.$fila2['plato'].'</td>
  25.                         <td>'.$fila2['precio'].'€</td>
  26.             </tr>';       
  27.         }
  28.         else
  29.         {
  30.             echo '<tr style="color:#FFF; font-size:20px;">
  31.                         <td>'."".'</td>
  32.                         <td>'.$fila2['plato'].'</td>
  33.                         <td>'.$fila2['precio'].'€</td>
  34.             </tr>'; 
  35.         }
  36.     }
  37.     
  38.  }
  39.  mysqli_free_result($resultado);
  40.  mysqli_free_result($resultado2);
  41.   ?>
Código HTML: 
Ver original
  1. </table>
  2. </div>
  3. </div>
  4.  
  5. </div>
  6.  
  7. <div id="galeria" class="container-fluid">
  8.     <link href="bootstrap.min.css" rel="stylesheet">
  9.     <link href="css/bootstrap-theme.css" rel="stylesheet">
  10.     <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">-->
  11.     <link href="css/jquery.bsPhotoGallery.css" rel="stylesheet">

Código Javascript: 
Ver original
  1. <script>
  2.       $(document).ready(function(){
  3.         $('ul.first').bsPhotoGallery({
  4.           "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
  5.           "hasModal" : true,
  6.          // "fullHeight" : false
  7.         });
  8.       });
  9.     </script>

Código CSS: 
Ver original
  1. <style>
  2.     @import url(https://fonts.googleapis.com/css?family=Bree+Serif);
  3.       
  4.       ul {
  5.           padding:0 0 0 0;
  6.           margin:0 0 40px 0;
  7.       }
  8.       ul li {
  9.           list-style:none;
  10.           margin-bottom:10px;
  11.       }
  12.     .text {
  13.       /*font-family: 'Bree Serif';*/
  14.       color:#666;
  15.       font-size:11px;
  16.       margin-bottom:10px;
  17.       padding:12px;
  18.       background:#fff;
  19.     }
  20.   </style>


Código HTML: 
Ver original
  1. <div class="container">
  2.         <div class="row" style="text-align:center; border-bottom:1px dashed #ccc;  padding:0 0 20px 0; margin-bottom:40px;">
  3.             <h3 style="font-family:'Bree Serif', arial; font-weight:bold; font-size:30px;">
  4.                 <a style="text-decoration:none; color:#666;">Galería de Imágenes</a>
  5.             </h3>
  6.          </div>
  7.         
  8.         
  9.         <ul class="first">
Código PHP: 
Ver original
  1. <?php
  2.                 include ("cafeteria_tonik_conexion.php");
  3.                 $sql = "SELECT * FROM imagenes";
  4.                 $resultado = mysqli_query($cafeteria_tonik_conexion, $sql);
  5.                 $directorio = "imagenes/";
  6.         ?>
  7.                      
  8.  
  9.             <?php
  10.             while ($fila = mysqli_fetch_assoc($resultado)){
  11.                     
  12.                 echo'<li><img alt="'.$fila['titulo'].'" class="img-thumbnail" src="'.$directorio.''.$fila['nombre_imagen'].'">
  13.                  <div class="text">"'.$fila['titulo'].'"</div>  
  14.                 </li>';
  15.                 
  16.             }
  17. mysqli_free_result($resultado);
  18.             
  19. ?>
Código HTML: 
Ver original
  1. </ul>
  2. </div> <!-- /container -->
  3.  
  4. </div>
  5.  
  6. <div id="menu" class="container-fluid">
  7.  <div class="col-sm-12">
  8.     <p style="font-family: 'Lobster', cursive; font-size:58px; text-align:center; color:#C63;">Menú Especial</p>
  9.     <br>
  10. </div>
Código PHP: 
Ver original
  1. <?php
  2.     include ("cafeteria_tonik_conexion.php");
  3.     $consul = "SELECT * FROM menu_especial ORDER BY fecha DESC";
  4.     $res = mysqli_query($cafeteria_tonik_conexion, $consul);
  5.     while ($fila1 = mysqli_fetch_array($res)){
  6.         
  7.     }
  8.   ?>
Código HTML: 
Ver original
  1. </div>
  2.  
  3. <div id="contacto" class="container-fluid">
  4.   <h1>Contacto</h1>
  5.   <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  6.   <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  7. </div>
  8.  
  9. <script src="js/jquery.min.js"></script>
  10. <script src="js/bootstrap.min.js"></script>
  11. <script src="js/script.js"></script>
  12. <script src="js/jquery.bsPhotoGallery.js"></script>
  13. </body>
  14. </html>

Entonces mi pregunta es: ¿cómo puedo hacer para que cada div ocupe el 100% de cualquier dispostivo?
Y otra pregunta: en este archivo hay un div id="galeria" que es una galería, que al hacer click en una imagen, ésta se hace grande. Cuando veo la página en el móvil, la foto sale enorme. ¿Cómo puedo hacer para que se vea según la pantalla que tenga?
Gracias.
Última edición por sergiodueso; 20/12/2017 a las 04:01