Column Drop

Clase 8 de 32 • Curso de Responsive Design 2015

jorge figueroa Figueroa

student•

@media (min-width : 800px) {  
    .c2, .c3 {  
        width : 25%; /*sumados hacen 50% + 75% de c1  por eso daba error*/  
    }  
  
    .c1 {  
        width : 75%  
    }  
}

Dayan Betancourt

student•

Column Drop: los bloques de información se ven como filas (uno debajo del otro) en movil y al ir creciendo la pantalla se van presentando como columnas.

Ramon Zuniga

student•

El ejemplo no funciono la primera ves ya que .c2 y .c3 tenian 25% lo que equivale a %50 del viewport mientras c1 tenia 75% eso hace que los elementos pasen el 100% del viewport.

Fabio Rojas

student•

pero si carlos hace al container flex-wrap:nowrap ocurre la magia que buscaba ;)

Juan Castro

teacher•

que piste (osea no-despiste) no creo que nadie mas se halla dado cuenta
:)

Luis Alvarez Almeida

student•

Me parece muy interesante utilizar la propiedad display flex, facilita mucho el trabajo.

haciendo la practica pude notar algo; cuando implemente los media query en orden descendente es decir @media (min-width: 300px), @media (min-width: 500px), @media (min-width: 800px) funciona correctamente pero al hacerlo en desorden @media (min-width: 500px)@media (min-width: 300px) no se adapta a las diferentes resoluciones.

Yeraldin Acevedo Acevedo

student•

Esta muy chevere ! = )

Luis Alvarez Almeida

student•

Cuales son las medidas bases para adaptar mi desarrollo osea las media query bases de donde debo partir para implementar la tecnica firts mobil ?

Edgardo T

student•

CSS es una hoja de estilo en cascada, eso significa que empipeza a tomar los valores desde el final del coumento. Por eso, incluso en el primer video, se recomienda colocar los media hasta el final del doc. Asi se comienza cargando el query mas pequeño, ej. 300 y luego se va reemplazando por los demas, segun los valores que reemplaces o que integres.

Erick Orlando Velasco Martínez

student•

Esta clase ha estado piola, sigan asi

Carlos Martínez

student•

Pequeña clase magistral !!!

Miguel Mendoza Molina

student•

Estuve haciendo el ejemplo y el la clase container no me funcionaba muy bien en los distintos navegadores actuales busque la solucion y encontre esto :

.container{  
    /*Compatibilidad con navegadores antiguos*/  
     display: -ms-flexbox;  
    display: -webkit-flex;  
    display: flex;  
    -webkit-flex-direction: row;  
    -ms-flex-direction: row;  
    flex-direction: row;  
    -webkit-flex-wrap: nowrap;  
    -ms-flex-wrap: nowrap;  
    flex-wrap: nowrap;  
    -webkit-justify-content: flex-start;  
    -ms-flex-pack: start;  
    justify-content: flex-start;  
    -webkit-align-content: stretch;  
    -ms-flex-line-pack: stretch;  
    align-content: stretch;  
}

Aun no lo he probado con navegadores antiguos pero supongo que ha de funcionar , saludos

Miguel Mendoza Molina

student•

Estuve buscando la solucion para edge (navegador) pero no lo he encontrado si alguien sabe la solucion para ello se lo agredeceria

hasta el momento lo unico encontrado a sido Internet Explorer 10 and earlier versions do not support the flex-wrap property.

Christopher Lara

student•

Comparto código HTML:

<!DOCTYPE html> <html> <head> <title>Ejemplo responsive con @media</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="app.css" /> </head> <body> <nav>navbar</nav> <div class="container"> <section class="c1"> Seccion 1 </section> <section class="c2"> Seccion 2 </section> <section class="c3"> Seccion 3 </section> </div> </body> </html>

Comparto código CSS:

body{
font-size: 16px;
margin: 0;
}
nav{
background-color: #eeeeee;
height: 64px;
line-height: 64px;
}
.container{
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.c1, .c2, .c3{
width: 100%;
}
.c1{
background-color: yellowgreen;
height: 400px;
}
.c2{
background-color: yellow;
height: 400px;
}
.c3{
background-color: violet;
height: 400px;
}
@media (min-width: 500px){
.c1{
width: 70%;
order: 2;
-webkit-order: 2;
}
.c2{
width: 30%;
order: 1;
-webkit-order: 1;
}
.c3{
width: 100%;
order: 3;
-webkit-order: 3;
}
}
@media(min-width:800px){
.c2, .c3{
width: 25%;
}
.c1{
width: 50%;
}
}

Column Drop

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?