Ver Mensaje Individual
  #3 (permalink)  
Antiguo 21/02/2013, 07:43
Maykk
 
Fecha de Ingreso: febrero-2011
Mensajes: 13
Antigüedad: 11 años, 11 meses
Puntos: 5
Respuesta: Less-Trapp Grid - CSS

Esa parte es hecha con media querys, el framework no hace desaparecer ningun div, eso seria un error, porque los diseñadores despues perderian sus bloques de infromacion.

Lo que hace el framework en este caso es redefinir el nuevo grid en cada media query:

Código CSS:
Ver original
  1. @media all and (max-width: 950px)  {
  2.         .col ( 6, auto );

que no tenga un contenedor de 12 sino de 6 y después de 3, los divs extras los oculto.

Aqui te paso el codigo completo que use para esa seccion:

Código CSS:
Ver original
  1. .grid_1 {
  2.     .grid-conf-fix ( 60px, 20px, 12 ); // <- Configuro el Grid
  3.     .col ( 12, auto ); // <- Defino el container con 12 columnas
  4.     background-color: @color_grid_gutter;
  5.     margin-top: 40px;
  6.     font-size: 16rem;
  7.     @timet: 0.3s;
  8.     transition: all @timet;
  9.  
  10.     h2 {
  11.         .col (12 , 1);
  12.         text-align: center;
  13.         background-color: white;
  14.  
  15.         span {
  16.             color: #aaa;
  17.         }
  18.         #content_grid:after  {
  19.             content: "Grid 960x";
  20.             color: @red_gh;
  21.         }
  22.     }
  23.  
  24.     div {
  25.         .col ( 1, 12 );
  26.         background-color: @color_grid_column;
  27.         height: 50px;
  28.     }
  29.  
  30.     @media all and (max-width: 950px)  {
  31.         .col ( 6, auto );  // <- Re-Defino el container con 6 columnas
  32.         font-size: 13rem;
  33.  
  34.         h2 {
  35.             .col ( 6 , 1 );
  36.             #content_grid:after  {
  37.                 content: "Grid 480x";
  38.                 color: @red_gh;
  39.             }
  40.         }
  41.         div {
  42.             .col ( 1, 6 );
  43.             &:nth-child(n+8) {  //<- Oculto los div sobrantes
  44.                 display: none;
  45.             }
  46.         }
  47.     }
  48.  
  49.     @media all and (max-width: 470px)  {
  50.         .col ( 3, auto );  // <- Defino el container con 3 columnas
  51.         font-size: 8rem;
  52.  
  53.         h2 {
  54.             .col ( 3 , 1 );
  55.             #content_grid:after  {
  56.                 content: "Grid 240x";
  57.                 color: @red_gh;
  58.             }
  59.         }
  60.  
  61.         div {
  62.             .col ( 1, 3 );
  63.             &:nth-child(n+5) { //<- Oculto los div sobrantes
  64.                 display: none;
  65.             }
  66.         }
  67.     }
  68. }

Saludos