0

Tengo que hacer un ejercicio en el que tengo que implementar el responsive para: browser, tablet y móvil.

El problema es que llevo 4 dias cambiando y tocando cosas y no me sale. Probablemente sean cosas que estoy saltándome o cosas muy básicas o simples pero como dije: es nivel principiante porque estoy empezando

CÓDIGO HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>MODULE 2 ASSIGNMENT</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='estilos.css'>
</head>
<body>
  <H1>Our Menu</H1>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-3 col-xs-6"><span class="breakfast">Breakfast</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
      <div class="col-lg-4 col-md-3 col-xs-6"><span class="maincourse">Main Course</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      <div class="col-lg-4 col-md-3 col-xs-6"><span class="dessert">Dessert</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
   </div>
  </div>
</body>
</html>

CÓDIGO CSS:

    *{box-sizing: border-box;}
    
    body{
        font-family: sans-serif;
    }
    
    
    h1{
    text-align: center;
    
    }
    
    
    div {
        box-sizing: border-box;
        padding-right: 5PX;
        padding-left: 5px;
        
    }
    
    
    div span{
        box-sizing: border-box;
        padding-right: 10PX;
        padding-left: 10px;
    }
    
    .row{
    margin-bottom: 15px;
    width:  100%;
    }
    
    .row > div{
        border: 1px solid black;
        background-color: lightgray;
    }
    
    .row span{
        border:  1px solid black;
        margin-left: -6px;
    
    }
    
    .col-lg-4{
        float: left;
        width:  33%;
    
    }
    
    .col-md-3{
        float: left;
        width:  33%;
        }
    
    .col-sm-6{
        float: left;
        width:  33%;
        }
    
    
    
    
    .breakfast{
    
        font-size: 18px;
        background-color: lightsteelblue;
    }
    .maincourse{
        
    
        font-size: 18px;
        background-color: lightsalmon;
    
    }
    .dessert{
    
        font-size: 18px;
        background-color: lightgoldenrodyellow;
    }
    
    
    
    
    /*****************BROWSER******************/
    
    @media only screen and (min-width: 992px) {}
    
      .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,  .col-lg-5, .col-lg-6, 
      .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12}
    }
    
      .col-lg-1{width: 8.33%; }
      .col-lg-2{width: 16.66%; }
      .col-lg-3{width: 25%; }
      .col-lg-4{width: 33%; }
      .col-lg-5{width: 41.66%; }
      .col-lg-6{width: 50%; }
      .col-lg-7{width: 58.33%; }
      .col-lg-8{width: 66.66%; }
      .col-lg-9{width: 74.99%; }
      .col-lg-10{width: 83.33%; }
      .col-lg-11{width: 91.66%; }
      .col-lg-12{width: 100%; }
      
    
    
    }
    
    
    
    /***********************TABLET*********************/
    
    @media (min-width:  768px) and (max-width:  991px){
    
     .col-md-1, .col-md-2, .col-md-3, .col-smd-4,  .col-md-5, .col-md-6, 
      .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    
        float: left;
      }
    
      .col-md-1{width: 8.33%; }
      .col-md-2{width: 16.66%; }
      .col-md-3{width: 25%; }
      .col-md-4{width: 33%; }
      .col-md-5{width: 41.66%; }
      .col-md-6{width: 50%; }
      .col-md-7{width: 58.33%; }
      .col-md-8{width: 66.66%; }
      .col-md-9{width: 74.99%; }
      .col-md-10{width: 83.33%; }
      .col-md-11{width: 91.66%; }
      .col-md-12{width: 100%; }
    
    
    
    
    
    /***************MOVIL****************/
    
    
    @media only screen and (max-width:  767px){
    
    
    .col-xs-6{ width: 100%; }
    
      .col-xs-1{width: 8.33%; }
      .col-xs-2{width: 16.66%; }
      .col-xs-3{width: 25%; }
      .col-xs-4{width: 33%; }
      .col-xs-5{width: 41.66%; }
      .col-xs-6{width: 50%; }
      .col-xs-7{width: 58.33%; }
      .col-xs-8{width: 66.66%; }
      .col-xs-9{width: 74.99%; }
      .col-xs-10{width: 83.33%; }
      .col-xs-11{width: 91.66%; }
      .col-xs-12{width: 100%; }
    
    }

Muchas gracias por la ayuda. Entiendo que los "media queries" estén mal. Realmente llevo 3 dfias revisando codigos online y mirando los videos de las clases y copiando y pegando y sigue sin salirme...

3
  • De momento, cambia esta linea: @media only screen and (min-width: 992px) {} por esta: @media only screen and (min-width: 992px) { pues tienes un error tipográfico y estas cerrando la llave antes de tiempo, por lo tanto no estas definiendo bien lo que viene a continuacion. A ver si con eso puedes continuar tu solo.
    – masterguru
    el 24 feb. 2022 a las 10:49
  • De hecho tienes que borrar tambien estas dos lineas: .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, y .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12} , así como la llave de cierre que viene a continuación: } porque no hacen nada y acabas cerrando de nuevo el media ese que acaba ignorando el resto de lineas
    – masterguru
    el 24 feb. 2022 a las 11:00
  • Buenas, el error tipográfico fue culpa mía, yo lo tengo bien puesto. Quizá no fui explícito pero busco que en browser se vean 3 cosas breakfast-maincourse-dessert, en tablet; se vean las dos primeras breakfast y maincourse y el dessert se coloque abajo rellenando el hueco de dos elementos breakfast y maincorse en este caso y luego en móvil se vea: breakfast, debajo main course y debajo dessert... una vez sabiendo esto (y que si no está claro puedo intentar explicarlo mejor o de otra manera), qué errores tengo en los @media?? Muchísimas gracias!! el 25 feb. 2022 a las 13:59

1 respuesta 1

0

Hola he revisado tu código y esta es la solución que funcionó. Primero cambié las clases de Bootstrap. En vez de :

    class="col-lg-4 col-md-3 col-xs-6"

Pones esta clase:

     class="col-lg-4 col-md-6"

Además debes eliminar esta clase :

    .col-lg-4
    {
        float: left;
        width:  33%;
    
    }

Y por último eliminar todo lo que está debajo del comentario /BROWSER*/

Espero que te sirva!

 *{box-sizing: border-box;}
    
    body{
        font-family: sans-serif;
    }
    
    
    h1{
    text-align: center;
    
    }
    
    
    div {
        box-sizing: border-box;
        padding-right: 5PX;
        padding-left: 5px;
        
    }
    
    
    div span{
        box-sizing: border-box;
        padding-right: 10PX;
        padding-left: 10px;
    }
    
    .row{
    margin-bottom: 15px;
    width:  100%;
    }
    
    .row > div{
        border: 1px solid black;
        background-color: lightgray;
    }
    
    .row span{
        border:  1px solid black;
        margin-left: -6px;
    
    }
    

    
    .col-md-3{
        float: left;
        width:  33%;
        }
    
    .col-sm-6{
        float: left;
        width:  33%;
        }
    
    
    
    
    .breakfast{
    
        font-size: 18px;
        background-color: lightsteelblue;
    }
    .maincourse{
        
    
        font-size: 18px;
        background-color: lightsalmon;
    
    }
    .dessert{
    
        font-size: 18px;
        background-color: lightgoldenrodyellow;
    }
    
    
    
    
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <H1>Our Menu</H1>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6"><span class="breakfast">Breakfast</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
      <div class="col-lg-4 col-md-6"><span class="maincourse">Main Course</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      <div class="col-lg-4 col-md-6"><span class="dessert">Dessert</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
   </div>
  </div>

Tu Respuesta

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

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