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...
@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..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 elmedia
ese que acaba ignorando el resto de lineas