Tema: css para móviles en chrome
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/04/2015, 13:08
Gustavo1973
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: css para móviles en chrome
estilo.css
Código CSS: 
Ver original
  1. body{
  2.     background-color:#eeeeee;
  3.     font-family: Arial;
  4.     margin:0;
  5.     width:100%;
  6. }
  7. /*img
  8. {
  9.     border:0px;
  10.     padding:0;
  11.     margin:0;
  12. }*/
  13. @media screen and (max-width: 420px)
  14. {    
  15.     section
  16.     {
  17.         padding:0;
  18.         width:360px;    
  19.         height:400px;
  20.     }
  21.     .contenedor
  22.     {
  23.         width:360px;
  24.         text-align: center; 
  25.         background-color:#ffffff;
  26.     }
  27. }
  28. @media screen and (min-width: 421px)
  29. {
  30.     section
  31.     {
  32.         padding:0;
  33.         width:1010px;    
  34.         height:400px;
  35.     }
  36.     .contenedor
  37.     {
  38.         width:1010px;
  39.         text-align: center; 
  40.         background-color:#ffffff;
  41.     }
  42. }
footer.css
Código CSS: 
Ver original
  1. @media screen and (min-width: 421px)
  2. {
  3.     footer{
  4.         padding:0 20px;
  5.     }
  6.     footer
  7.     {    
  8.         overflow:visible;
  9.     }
  10.     footer #sucursales 
  11.     {
  12.         width:970px;
  13.         overflow:auto;
  14.         padding:0 0 0 0px;
  15.         margin:0;
  16.         text-align:center;
  17.     }
  18.     footer #sucursales ul
  19.     {
  20.         width:970px;
  21.         padding:0;
  22.         margin:0;
  23.     }
  24.     footer #sucursales li
  25.     {
  26.         list-style-type: none;
  27.         display: inline;
  28.         list-style:none;
  29.         float: left; 
  30.         width:131px;
  31.         padding:0 7px 0 0;
  32.     }
  33.     footer #sucursales img
  34.     {
  35.         border:1px solid #222222;
  36.     }
  37.     footer #sucursales a
  38.     {    
  39.         font-family: "FreesiaUPC", "Arial";
  40.         font-size:20px;
  41.         color:#222222;
  42.     }
  43.     footer .firmaw
  44.     {
  45.         
  46.         display: table-cell;
  47.         vertical-align:bottom;
  48.         height:80px;
  49.     }
  50.     footer .footer
  51.     {
  52.         background-color:#DEE1E6;
  53.         width:970px;
  54.         overflow:visible;
  55.         height:80px;
  56.  
  57.     }
  58.     footer .copy
  59.     {
  60.         float:left;
  61.         width:770px;
  62.         text-align:left;
  63.         padding: 15px 15px;
  64.     }
  65.     footer .copy a
  66.     {
  67.         font-family: "FreesiaUPC", "Arial";
  68.         font-size:22px;
  69.     }
  70. }
  71. @media screen and (max-width: 420px)
  72. {
  73.     footer{
  74.         padding:0;
  75.         width: 360px;
  76.     }
  77.     footer
  78.     {    
  79.         overflow:visible;
  80.     }
  81.     /********** sucursales ********************/
  82.     footer #sucursales ul{
  83.         list-style: none;
  84.         font-size: 14px;
  85.         margin:0;
  86.         padding:0;
  87.     } 
  88.  
  89.     footer #sucursales li{
  90.         display: block;
  91.         text-transform: uppercase;
  92.         text-align: left;
  93.     }
  94.     footer #suc-mobile{
  95.         display: none;
  96.         background: url("../imagenes/nav-sucursales.png") no-repeat left center;
  97.         width: 360px;
  98.         height: 30px;
  99.         /*position: relative;
  100.         top:0;*/
  101.     }   
  102.     footer #sucursales .tit-mobile
  103.         {
  104.             font-family: "FreesiaUPC", "Arial";
  105.             font-size:0px;
  106.             color:#ffffff;
  107.             height:60px;
  108.             padding:0 5px;
  109.         }
  110.     footer #suc-mobile{ display: block; }
  111.     footer #sucursales{
  112.         width: 100%;
  113.         float: none;
  114.         margin:0 0 5px 0;
  115.         padding:0;
  116.     }
  117.     footer #sucursales ul{
  118.  
  119.         max-height: 0;
  120.         overflow: hidden;
  121.         margin:0;
  122.     }
  123.     footer #sucursales li{
  124.         background: #20337f; 
  125.         height: 20px;
  126.         float: none;    
  127.         margin:0;
  128.         padding: 5px 10px;
  129.         text-align:center;
  130.         font-size:18px;
  131.         border-bottom:1px solid #ffffff;
  132.  
  133.     }
  134.  
  135.     footer #sucursales li:last-child{ border-bottom: 1;}
  136.     footer #sucursales li a{
  137.         
  138.         line-height: normal;
  139.         color:#ffffff;
  140.         font-weight: bold;
  141.         text-transform:uppercase;
  142.         text-decoration:none;
  143.  
  144.     }
  145.     footer #sucursales ul.open-menu{
  146.         max-height: 420px;
  147.         -webkit-transition: max-height .4s;
  148.         -moz-transition: max-height .4s;
  149.         -ms-transition: max-height .4s;
  150.         -o-transition: max-height .4s;
  151.         transition: max-height .4s;
  152.     }
  153.     footer #sucursales img
  154.     {
  155.         display: none;
  156.     }
  157.     /**/
  158.     footer .firmaw
  159.     {
  160.         
  161.         /*display: table-cell;*/
  162.         vertical-align:bottom;
  163.         height:60px;
  164.     }
  165.     footer .footer
  166.     {
  167.         background-color:#DEE1E6;
  168.         width:360px;
  169.         overflow:visible;
  170.         height:160px;
  171.  
  172.     }
  173.     footer .copy
  174.     {
  175.         /*float:left;*/
  176.         width:360px;
  177.         text-align:center;
  178.         padding: 0;
  179.         overflow:visible;
  180.         height:100px;
  181.     }
  182.     footer .copy a
  183.     {
  184.         font-family: "FreesiaUPC", "Arial";
  185.         font-size:22px;
  186.     }
  187. }
style.css
Código CSS: 
Ver original
  1. /* -------------------- loopedslider ------------------------ */
  2. @media screen and (max-width: 420px)
  3. {
  4.  
  5.     .container { width:360px; height:114px; overflow:hidden; position:relative;}
  6.     .container img { width:360px; height:114px;}
  7.     .slides { position:absolute; top:0; left:0; z-index:0;}
  8.     .slides div { position:absolute; top:0; width:360px; display:none;}
  9.     #loopedSlider .container{ width:360px; height:114px;  overflow:hidden; margin:0px 0px 0px 0px;}
  10.     .slides { position:absolute; top:0; left:0; }
  11.     ul.slides { position:absolute; top:0; left:0; list-style:none; padding:0;margin:0px 0px 0px 0px; }
  12.     .slides div,ul.slides li { position:absolute; top:0px;  width:360px; display:none; padding:0; margin:0; }
  13.  
  14.     #loopedSlider{ z-index:1;margin:0 auto 10px; width:360px; height:114px; position:relative; clear:both;background:url(../images/slider_bg.gif) 0px 0px no-repeat;float:right;}
  15.     ul.pagination { list-style:none; padding:0; margin:0; }
  16.     ul.pagination li  { float:left;padding:0px 1px 0px 0px;}
  17.     ul.pagination li a{background:url(../images/button.png) 0px 0px no-repeat; color:#82621d; font-size:0px; width:20px; height:19px; line-height:0px; text-align:center;  display:inline-block; float:left; text-decoration:none; font-weight:bold }
  18.     ul.pagination li.active a {background:url(../images/button-act.png)  0px 0px no-repeat; color:#598b89; border:none; text-decoration:none }
  19.     ul.pagination li a:hover {background:url(../images/button-act.png)  0px 0px no-repeat; color:#598b89; border:none; text-decoration:none}
  20.     .slides_wrapper_left    {background:url(../images/slider_bg.jpg) 0px 0px no-repeat; margin-right:5px;}
  21.     .slides_wrapper_right    {background:url(../images/slider_bg.jpg) 100% 0px no-repeat;}
  22.     .slides_wrapper_center    {font:0px / 0px normal Arial, Helvetica, sans-serif; height:448px;}
  23.     /* -------------------- loopedslider ------------------------*/
  24. }
  25. @media screen and (min-width: 421px)
  26. {
  27.  
  28.     .container { width:760px; height:270px; overflow:hidden; position:relative;}
  29.     .container img { width:760px; height:270px;}
  30.     .slides { position:absolute; top:0; left:0; z-index:0;}
  31.     .slides div { position:absolute; top:0; width:760px; display:none;}
  32.     #loopedSlider .container{ width:760px; height:270px;  overflow:hidden; margin:0px 0px 0px 0px;}
  33.     .slides { position:absolute; top:0; left:0; }
  34.     ul.slides { position:absolute; top:0; left:0; list-style:none; padding:0;margin:0px 0px 0px 0px; }
  35.     .slides div,ul.slides li { position:absolute; top:0px;  width:760px; display:none; padding:0; margin:0; }
  36.  
  37.     #loopedSlider{ z-index:1;margin:0 auto 10px; width:760px; height:270px; position:relative; clear:both;background:url(../images/slider_bg.gif) 0px 0px no-repeat;float:right;}
  38.     ul.pagination { list-style:none; padding:0; margin:0; }
  39.     ul.pagination li  { float:left;padding:0px 1px 0px 0px;}
  40.     ul.pagination li a{background:url(../images/button.png) 0px 0px no-repeat; color:#82621d; font-size:0px; width:20px; height:19px; line-height:0px; text-align:center;  display:inline-block; float:left; text-decoration:none; font-weight:bold }
  41.     ul.pagination li.active a {background:url(../images/button-act.png)  0px 0px no-repeat; color:#598b89; border:none; text-decoration:none }
  42.     ul.pagination li a:hover {background:url(../images/button-act.png)  0px 0px no-repeat; color:#598b89; border:none; text-decoration:none}
  43.     
  44. .pagination-container {
  45. margin:-209px 0 0 0px;
  46. position:absolute;
  47. width:23px;
  48. z-index:999;
  49. right:6px;
  50. }
  51.     .slides_wrapper_left    {background:url(../images/slider_bg.jpg) 0px 0px no-repeat; margin-right:5px;}
  52.     .slides_wrapper_right    {background:url(../images/slider_bg.jpg) 100% 0px no-repeat;}
  53.     .slides_wrapper_center    {font:0px / 0px normal Arial, Helvetica, sans-serif; height:448px;}
  54.     /* -------------------- loopedslider ------------------------*/
  55. }

No se como hacerlo

Desde ya muchas Gracias!!!
Última edición por webosiris; 22/04/2015 a las 21:33 Razón: elimino enlace a petición