[SOLUCIONADO] Problema con web responsive

sergiodueso · #1 (**permalink**) 20/12/2017, 03:37

Buenos días, tengo este código:

<

Código HTML:

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

Código CSS:

Ver original<style>
  
  @import url('https://fonts.googleapis.com/css?family=Lobster');
  body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
  #inicio {padding-top:40px;height:700px;}
  #carta {padding-top:50px;height:700px; overflow:auto;}
  #galeria {padding-top:50px;height:700px; overflow:auto;}
  #menu {padding-top:50px;height:700px;}
  #contacto {padding-top:50px;height:700px;}
  .display-3
  {
      text-align:center;
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
     color: #e0dfdc;
  
  letter-spacing: .1em;
  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);
}
.direccion
{
    text-align:center;
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
     color: #e0dfdc;
  
  letter-spacing: .1em;
  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);
}
.col-centrada{
    float: none;
    margin: 0 auto;
    font-family: 'Lobster', cursive;
}
 
</style>

Código HTML:

Ver original</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
 
<nav class="navbar navbar-inverse navbar-fixed-top" style="font-family: 'Lobster', cursive; font-size:20px;">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="sr-only">Menú</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Menú</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#inicio">Inicio</a></li>
          <li><a href="#carta">Carta</a></li>
          <li><a href="#galeria">Galería</a></li>
          <li><a href="#menu">Menu Especial</a></li>
          <li><a href="#contacto">Contacto</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>    
 
<div id="inicio" class="container-fluid" style="background-color:#804040;">
    <div class="jumbotron" style="background-color:#804040;">
        <h1 class="display-3">Cafetería Tonik</h1>
        <p class="direccion">Avda. Puerta de Sancho, 12 - Zaragoza</p>
    </div>
    
    <div class="row">
        <div class="col-sm-4">
            <p> Esto es para probar </p>
        </div>
        <div class="col-sm-4">
            <img class="center-block" alt="Bootstrap Image Preview" width="450px" src="fondo/Cafeteria-tonik-fondo-transparente-sin-letra.png">
        </div>
        <div class="col-sm-4">
            <p> Esto es para probar </p>
        </div>
    </div>
</div>
 
<div id="carta" class="container-fluid" style="background-color:#000;">
<div class="col-sm-12">
    <p style="font-family: 'Lobster', cursive; font-size:58px; text-align:center; color:#C63;">Carta</p>
    <br>
</div>
<div class="container-fluid">
        <div class="col-sm-12 col-centrada">
        <table class="table">
         <tr>
            
         </tr>

Código HTML:

Ver original<?php
     include ("cafeteria_tonik_conexion.php");
     $mi_id = 0;
     
 $consulta1 = "SELECT * FROM secciones_carta";
 $resultado = mysqli_query($cafeteria_tonik_conexion, $consulta1);
 while ($fila=mysqli_fetch_array($resultado))
 {
     
     echo '<thead style="font-size:25px; color:#093;">
    <tr>
      <th>'.$fila['seccion_carta'].'</th>
    </tr>
  </thead>';
    
    $consulta2 ="SELECT * FROM platos WHERE id_secciones = '".$fila['id_secciones_carta']."'";
    $resultado2 = mysqli_query($cafeteria_tonik_conexion, $consulta2);
    while ($fila2=mysqli_fetch_array($resultado2))
    {
        if ( $fila2['id_secciones'] == 1 or $fila2['id_secciones'] == 2 or $fila2['id_secciones'] == 3 or $fila2['id_secciones'] == 7)
        {
            echo '<tr style="color:#FFF; font-size:20px;">
                        <td style="color:#C63;">'.$fila2['titulo'].'</td>
                        <td>'.$fila2['plato'].'</td>
                        <td>'.$fila2['precio'].'€</td>
            </tr>';       
        }
        else
        {
            echo '<tr style="color:#FFF; font-size:20px;">
                        <td>'."".'</td>
                        <td>'.$fila2['plato'].'</td>
                        <td>'.$fila2['precio'].'€</td>
            </tr>'; 
        }
    }
    
 }
 mysqli_free_result($resultado);
 mysqli_free_result($resultado2);
  ?>

Código HTML:

Ver original</table>
</div>
</div>
 
</div>
 
<div id="galeria" class="container-fluid">
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="css/jquery.bsPhotoGallery.css" rel="stylesheet">

Código Javascript:

Ver original<script>
      $(document).ready(function(){
        $('ul.first').bsPhotoGallery({
          "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
          "hasModal" : true,
         // "fullHeight" : false
        });
      });
    </script>

Código CSS:

Ver original<style>
    @import url(https://fonts.googleapis.com/css?family=Bree+Serif);
      
      ul {
          padding:0 0 0 0;
          margin:0 0 40px 0;
      }
      ul li {
          list-style:none;
          margin-bottom:10px;
      }
    .text {
      /*font-family: 'Bree Serif';*/
      color:#666;
      font-size:11px;
      margin-bottom:10px;
      padding:12px;
      background:#fff;
    }
  </style>

Código HTML:

Ver original<div class="container">
        <div class="row" style="text-align:center; border-bottom:1px dashed #ccc;  padding:0 0 20px 0; margin-bottom:40px;">
            <h3 style="font-family:'Bree Serif', arial; font-weight:bold; font-size:30px;">
                <a style="text-decoration:none; color:#666;">Galería de Imágenes</a>
            </h3>
         </div>
        
        
        <ul class="first">

Código PHP:

Ver original<?php
                include ("cafeteria_tonik_conexion.php");
                $sql = "SELECT * FROM imagenes";
                $resultado = mysqli_query($cafeteria_tonik_conexion, $sql);
                $directorio = "imagenes/";
        ?>
                     
 
            <?php
            while ($fila = mysqli_fetch_assoc($resultado)){
                    
                echo'<li><img alt="'.$fila['titulo'].'" class="img-thumbnail" src="'.$directorio.''.$fila['nombre_imagen'].'">
                 <div class="text">"'.$fila['titulo'].'"</div>  
                </li>';
                
            }
mysqli_free_result($resultado);
            
?>

Código HTML:

Ver original</ul>
</div> <!-- /container -->
 
</div>
 
<div id="menu" class="container-fluid">
 <div class="col-sm-12">
    <p style="font-family: 'Lobster', cursive; font-size:58px; text-align:center; color:#C63;">Menú Especial</p>
    <br>
</div>

Código PHP:

Ver original<?php
    include ("cafeteria_tonik_conexion.php");
    $consul = "SELECT * FROM menu_especial ORDER BY fecha DESC";
    $res = mysqli_query($cafeteria_tonik_conexion, $consul);
    while ($fila1 = mysqli_fetch_array($res)){
        
    }
  ?>

Código HTML:

Ver original</div>
 
<div id="contacto" class="container-fluid">
  <h1>Contacto</h1>
  <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>
  <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>
</div>
 
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.bsPhotoGallery.js"></script>
</body>
</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.

sergiodueso · #2 (**permalink**) 20/12/2017, 09:08

Buenas tardes, necesito respuesta urgente. Tengo que entregar la página web en esta semana y es lo último que me queda. Gracias

ArturoGallegos · #3 (**permalink**) 20/12/2017, 09:25

Cita:

Iniciado por sergiodueso

Buenas tardes, necesito respuesta urgente. Tengo que entregar la página web en esta semana y es lo último que me queda. Gracias

Aquí nada se responde con calidad de urgente, si bien es muy sencillo lo que pides por a ver salido con lo de urgente ya no te respondo.

Si te urge tanto paga por que te hagan el trabajo $$$$ invierte, nosotros tomamos nuestro tiempo en aprender como para venir a regalar nuestro trabajo y que le paguen a alguien que ni la molestia de estudiar se ha tomado.

sergiodueso · #4 (**permalink**) 20/12/2017, 11:24

Siento la respuesta. Necesito vuestra ayuda. Gracias

g3kdigital · #5 (**permalink**) 20/12/2017, 18:17

Perfecto, cuando necesites algo urgente me preguntas y acordamos un precio: m.me/g3kdigital o en buscame en twitter como @g3kdigital, cuando no lo sea, por favor entiende que si respondemos por este medio, es cuando tenemos tiempo y ganas. Lo digo en buen plan jejeje.

Habiendo dicho esto:

1) Para que un DIV ocupe siempre el 100% de un dispositivo, usa height: 100 vh. y te aconsejo investigar sobre estas unidades de medición: vh y vw, te salvaran en más de un problema responsive.

2) Para que las imágenes ocupen el 100% en un dispositivo, te aconsejo usar la etiqueta picture y usar la imagen como background-image: url('img/imagen.jpg');, en este caso el elemento picture, debe ocupar las medidas que le pongas y siempre que uses: background-size: cover; ocupará todo lo que "mida" el contenedor de la imagen. Yo te recomiendo el elemento picture, pero la verdad puedes usarlo en cualquier etiqueta (DIV, P, SECTION, SPAN, etc), yo lo recomiendo porque es coherente usarla.

3) Si quieres que la imagen sea 100%, pero no como background sino como IMG, pues especifica más tu pregunta, ya que es un poco más complicado que solo usar un atributo en CSS y habrán muchos "depende".

Éxitos!!

sergiodueso · #6 (**permalink**) 21/12/2017, 00:08

Gracias por tu respuesta. Te voy a poner la URL de la página que aún está sin terminar para que, cuando puedas, la cargues en un móvil y me cuentas. Porque, el href de la imagen, llama a un script en javascript que levanta un div. Ese div es el que quiero que se amolde a cualquier dispositivo. Gracias. www.cafeteriatonik.miptopia.com

Rafael · #7 (**permalink**) 22/12/2017, 09:25

la respuesta de g3kdigital es una buena guía.

Tu link no funciona, pero independientemente de funcione o no, es complicado estar viendo el código de alguien más.

Fíjate en esta pregunta tuya: "Entonces mi pregunta es: ¿cómo puedo hacer para que cada div ocupe el 100% de cualquier dispostivo?"
La respuesta es: un div naturalmente ocupa el 100% de cualquier dispositivo. No le hagas nada.

El problema es de con todo el código que has puesto, se nota y es evidente que estás copiando y pegando codigo sin entender que hace, y tu mismo as roto el comportamiento natural del div.

Puedes depurar un poco tu problema:

1) Entender conceptos de las unidades como g3kdigital te ha comentado.

2) En una copia, ir eliminando poco a poco las cosas que no tengan que ver con el problema específico, hasta localizar el código que te está afectando. Normalmente acaba siendo un sólo párrafo de html y uno de css.

Pero en realidad la metodología que tienes que usar es:

1) Planear tu resultado final. Hacer un dummy o esqueleto bien definido.

2) Ir agregando cosas conforme lo vayas necesitando y probarlo en el momento. Si algo se "rompe" inmediatamente sabes que cosa sucedió.

sergiodueso · #8 (**permalink**) 22/12/2017, 11:40

Perdón me confundí. www.cafeteriatonik.mipropia.com/index.php

g3kdigital · #9 (**permalink**) 26/12/2017, 09:32

Cita:

Iniciado por sergiodueso

Perdón me confundí. www.cafeteriatonik.mipropia.com/index.php

He visto tu página y lo que te respondí, es relacionado a tu pregunta, pero aún así, no va a resolver tu problema:

Cita:

Iniciado por sergiodueso

¿cómo puedo hacer para que cada div ocupe el 100% de cualquier dispostivo?

Cualquier DIV siempre va a ocupar el 100% del ancho y alto de la ventana si usas width: 100vw & height: 100vh o encapsular estas en una clase "fullscreen" así:

Código CSS:

Ver originalhtml body .fullscreen{
width: 100vw;
height: 100vh;
}

Y aplicarlas a cualquier DIV o etiqueta bloque (section, p, figure, header, etc) que quieras, incluso puedes añadir la propiedad: display:block o display:inline-block; a cualquier otras etiqueta no bloque (span, i, strong) y también obedecerá la clase.

Tu otra pregunta:

Cita:

Iniciado por sergiodueso

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?

¿Sale enorme? En mi móvil se ve normal.

Ahora para que se vea bien en cada dispositivo, la manera más simple de corregir una imagen en etiqueta img, es colocarle width: 100% o width: 100vw y height: auto; yo te dije que puedes colocar la url de la imagen en un figure y usar background-size: cover; y eliminar la etiqueta img, es la mejor manera ya que esta se adaptará siempre al tamaño del contenedor sin importar las medidas.

También veo que en la página esto se realiza mediante un modal y hay varios div envolviendo la etiqueta img, si a todos estos div le aplicas la clase que te puse arriba lograras que ocupen el 100% de ancho y alto, pero la imagen se distorsionará eso es seguro, ya que perderá su proporcion. Puedes dejarle solo el ancho al 100% y el alto en automático.

Sí ves que te coloco un montón de opciones a posibles errores, es por lo desordenado de tu post, para más ayuda con respecto a tu caso debes hacer caso al consejo de Rafael, debes entender que el código html, css, php y js deben ir al menos agrupados en un mismo fragmento de código que coloques en hightlight o aislar el código que realmente necesitas modificar en un jsfiddle o codepen para nosotros entenderlo y ayudarte bien.

sergiodueso · #10 (**permalink**) 31/12/2017, 05:51

Muchas gracias. Lo intentaré