Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] css para móviles en chrome

 Estas en el tema de css para móviles en chrome en el foro de CSS en Foros del Web. Estoy haciendo una web adaptable a móvil y no me funciona en los celulares, no al menos en chrome bajo android. Si cambio el ancho ...
  #1 (permalink)  
Antiguo 22/04/2015, 13:06
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años
Puntos: 3
css para móviles en chrome
Estoy haciendo una web adaptable a móvil y no me funciona en los celulares, no al menos en chrome bajo android.
Si cambio el ancho de los navegadores (chrome, ff, ie) por de bajo que el que setie con @media screen and (...) en el emulador de FF funciona bien, pero con el emulador de Chrome (me refiero cuando damos boton derecho -> inspeccionar elemento) siempre muestra el del full screen.
Subo el código.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <title> De Arma Viajes y Turismo </title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta name="Author" content="www.webmasterenmerlo.com.ar">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
  10. </head>
  11. <link href="http://localhost/dearma-nueva/css/header.css" rel="stylesheet" type="text/css">
  12. <script src="http://localhost/dearma-nueva/js/formularios.js" type="text/javascript"></script>
  13. <script src="http://localhost/dearma-nueva/js/menu.js" type="text/javascript"></script>
  14. <link href="http://localhost/dearma-nueva/css/estilo.css" rel="stylesheet" type="text/css">
  15. <link href="http://localhost/dearma-nueva/css/footer.css" rel="stylesheet" type="text/css">
  16.  <!-- Layous -->
  17. <link rel="stylesheet" type="text/css" href="http://localhost/dearma-nueva/css/style.css">
  18. <script src="http://localhost/dearma-nueva/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  20.  
  21. <script src="http://localhost/dearma-nueva/js/loopedslider.0.5.4.js" type="text/javascript"></script>
  22.  
  23. <script type="text/javascript" charset="utf-8">
  24.     $(function(){
  25.         $('#loopedSlider').loopedSlider();
  26.     });
  27. </script>
  28. <!-- Layous -->
  29. <body>  
  30.     <center>
  31.     <div class="contenedor">
  32.         <div class="principal">
  33.         <header>
  34.             <div class="logo">
  35.     <div class="logo2"><a href="http://localhost/dearma-nueva/index.php"><img src="http://localhost/dearma-nueva/imagenes/logo.png" border="0"></a></div>
  36.     <div class="telefono"><img src="http://localhost/dearma-nueva/imagenes/telefono.jpg"></div>
  37.     <nav id="menu"><a class="nav-mobile" id="nav-mobile"></a><ul><li><a href='http://localhost/dearma-nueva/index.php'>Home</a></li><li><a href='http://localhost/dearma-nueva/la-empresa/'>La Empresa</a></li><li><a href='http://localhost/dearma-nueva/diario/'>Nuestro Diario</a></li><li><a href='http://localhost/dearma-nueva/miniturismo/'>Miniturismo</a></li><li><a href='http://localhost/dearma-nueva/administracion/'>Administracion</a></li><li><a href='http://localhost/dearma-nueva/formas-de-pago/'>Formas de Pago</a></li><li><a href='http://localhost/dearma-nueva/galerias/'>Galerias de Fotos</a></li><li><a href='http://localhost/dearma-nueva/contactos/'>Contactos</a></li></ul></nav>
  38. </div>
  39. <div class="contlayus">
  40.     <div class="ofertas">
  41.         <div>
  42.             <a href="http://localhost/dearma-nueva/ofertas/1"><img src="http://localhost/dearma-nueva/fotos/imagenc1.jpg" border="0" alt=""></a>
  43.         </div>
  44.         <div>
  45.             <a href="http://localhost/dearma-nueva/ofertas/2"><img src="http://localhost/dearma-nueva/fotos/imagenc2.jpg" border="0" alt=""></a>
  46.         </div>
  47.         <div>
  48.             <a href="http://localhost/dearma-nueva/ofertas/3"><img src="http://localhost/dearma-nueva/fotos/imagenc3.jpg" border="0" alt=""></a>
  49.         </div>
  50.     </div>
  51.     <div class="loopedSlider">
  52.         <div id="loopedSlider">
  53.             <div class="container">
  54.                 <div style="left: 0px;" class="slides">
  55.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head.jpg"   border="0" ></a></div>
  56.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head2.jpg"   border="0" ></a></div>
  57.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head4.jpg"  border="0" ></a></div>
  58.                     <div style="position: absolute;"><a><img src="http://localhost/dearma-nueva/imagenes/fondo-head3.jpg"   border="0" ></a></div>
  59.                  </div>
  60.             </div>
  61.         </div>
  62.     </div>
  63.     <div class="solapas">
  64.         <table border="0"cellpadding="2" cellspacing="0">
  65.         <tr>
  66.             <td><a href="http://www.mundigeaonline.com/dearmaturismo/" target="_blank"><img src="http://localhost/dearma-nueva/imagenes/solapa01.jpg" width="67" height="81" border="0" alt=""></a></td>
  67.             <td><a href="http://www.e-agencias.com.ar/ag12404/home/flights" target="_blank"><img src="http://localhost/dearma-nueva/imagenes/solapa02.jpg" width="67" height="81" border="0" alt=""></a></td>
  68.             <td><a href="http://dearmaturismo.plataforma10.com/Servicios" target="_blank"><img src="http://localhost/dearma-nueva/imagenes/solapa03.jpg" width="67" height="81" border="0" alt=""></a></td>
  69.         </tr>
  70.         </table>
  71.     </div>
  72.     <div class="iso9001">
  73.         <img src="http://localhost/dearma-nueva/imagenes/iso9001.png" width="114" height="107" border="0" alt="">
  74.     </div>
  75. </div>
  76. <nav id="agenda">
  77.         <a class="tit-mobile" id="tit-mobile">Agenda Viajera</a>
  78.         <ul>
  79.             <li><a >Enero</a></li>
  80.             <li><a >Febrero</a></li>
  81.             <li><a >Marzo</a></li>
  82.             <li><a >Abril</a></li>
  83.             <li><a >Mayo</a></li>
  84.             <li><a >Junio</a></li>
  85.             <li><a >Julio</a></li>
  86.             <li><a >Agosto</a></li>
  87.             <li><a >Septiembre</a></li>
  88.             <li><a >Octubre</a></li>
  89.             <li><a >Noviembre</a></li>
  90.             <li><a >Diciembre</a></li>
  91.         </ul>
  92. </nav>
  93. <div id="iconos" class="iconos">
  94.     <table border="0"cellpadding="0" cellspacing="0">
  95.     <tr>
  96.         <td><a href="http://mobile.etrk.com.ar/" target=_blank"><img src="http://localhost/dearma-nueva/imagenes/geo-pos.jpg" width="234" height="149" border="0" alt=""></a></td>
  97.         <td><a href="http://localhost/dearma-nueva/nuestra-flota/"><img src="http://localhost/dearma-nueva/imagenes/nuestra-flota.jpg" width="234" height="149" border="0" alt=""></a></td>
  98.         <td><a href="https://www.facebook.com/dearmaviajes" target=_blank"><img src="http://localhost/dearma-nueva/imagenes/facebook.jpg" width="234" height="149" border="0" alt=""></a></td>
  99.         <td><a href="http://localhost/dearma-nueva/disponibilidad-online/"><img src="http://localhost/dearma-nueva/imagenes/dispo-online.jpg" width="234" height="149" border="0" alt=""></a></td>
  100.     </tr>
  101.     </table>
  102. </div>      </header>
  103.         <section>
  104.         <div style="float:left;">
  105.                     </div>
  106.         </section>
  107.         <footer>
  108.             <center>
  109. <div id="sucursales">
  110.     <a class="suc-mobile" id="suc-mobile"></a>
  111.     <ul>
  112.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_merlo.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/1">Merlo</a></li>
  113.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_moron.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/2">Moron</a></li>
  114.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_padua.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/3">S.A. de Padua</a></li>
  115.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_hurlingham.jpg"border="1"alt="turismo"width="130"> <a href="http://localhost/dearma-nueva/sucursal/4">Hurlingham</a></li>
  116.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_flores.jpg"border="1"alt="turismo"width="130"> <a href="http://localhost/dearma-nueva/sucursal/5">Flores</a></li>
  117.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_moreno.jpg"border="1"alt="turismo"width="130"> <a href="http://localhost/dearma-nueva/sucursal/6">Moreno</a></li>
  118.         <li class="foto"><img src="http://localhost/dearma-nueva/imagenes/sucu_ramos.jpg"border="1"alt="turismo" width="130"> <a href="http://localhost/dearma-nueva/sucursal/7">Ramos Mej&iacute;a</a></li>
  119.     </ul>
  120. </div>
  121. </center>
  122. <div class="footer">
  123.     <div class="copy">
  124.         <a>&copy; Copyright .: de Arma Viajes y Turismo :.<br>D.N.T. Leg: 10448 - Disp. 253/99</a>
  125.     </div>
  126.     <div class="firmaw">
  127.         <a href="http://www.hgstudio.com.ar"target="_blank"><img src="http://localhost/dearma-nueva/imagenes/power_hg.png" border="0" alt=""></a>
  128.     </div>
  129.  
  130. </div>      </footer>
  131.         </div>
  132.         
  133.     </div>
  134.     </center>
  135. <script>
  136.  
  137.     $(function() {
  138.  
  139.         var btn_movil = $('#nav-mobile'),
  140.             menu = $('#menu').find('ul');
  141.  
  142.         // Al dar click agregar/quitar clases que permiten el despliegue del menú
  143.         btn_movil.on('click', function (e) {
  144.             e.preventDefault();
  145.  
  146.             var el = $(this);
  147.  
  148.             el.toggleClass('nav-active');
  149.             menu.toggleClass('open-menu');
  150.         })
  151.  
  152.     });
  153.     $(function() {
  154.  
  155.         var btn_movil = $('#tit-mobile'),
  156.             menu = $('#agenda').find('ul');
  157.  
  158.         // Al dar click agregar/quitar clases que permiten el despliegue del menú
  159.         btn_movil.on('click', function (e) {
  160.             e.preventDefault();
  161.  
  162.             var el = $(this);
  163.  
  164.             el.toggleClass('nav-active');
  165.             menu.toggleClass('open-menu');
  166.         })
  167.  
  168.     });
  169.     $(function() {
  170.  
  171.         var btn_movil = $('#suc-mobile'),
  172.             menu = $('#sucursales').find('ul');
  173.  
  174.         // Al dar click agregar/quitar clases que permiten el despliegue del menú
  175.         btn_movil.on('click', function (e) {
  176.             e.preventDefault();
  177.  
  178.             var el = $(this);
  179.  
  180.             el.toggleClass('nav-active');
  181.             menu.toggleClass('open-menu');
  182.         })
  183.  
  184.     });
  185. </script>
  186.  
  187. </body>
  188. </html>
  #2 (permalink)  
Antiguo 22/04/2015, 13:08
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años
Puntos: 3
Respuesta: css para móviles en chrome
Lo corto porque no me deja crear un post tan largo.


header.css
Código CSS: 
Ver original
  1. @font-face {
  2.   font-family: "FreesiaUPC";
  3.   src: url("../css/upcfl.eot");
  4. }
  5. @font-face {
  6.   font-family: "FreesiaUPC";
  7.   src: url("../css/upcfl.ttf");
  8. }
  9.  
  10. @media screen and (max-width: 420px)
  11. {   
  12.  
  13.     body{
  14.         background-color:#eeeeee;
  15.         font-family: Arial;
  16.         margin:0;
  17.         width:360px;
  18.     }
  19.     header
  20.     {
  21.         background-color:#ffffff;
  22.         width:360px;
  23.         margin:0;
  24.  
  25.     }
  26.     header .iso9001
  27.     {
  28.         display: none;
  29.     }
  30.     header .contlayus
  31.     {
  32.         width:360px;
  33.         height:280px;
  34.         overflow:visible;
  35.     }
  36.     header .ofertas
  37.     {
  38.         width:360px;
  39.     }
  40.     header .ofertas div
  41.     {
  42.         float:left;
  43.     }
  44.     header .ofertas img
  45.     {
  46.         width:120px;
  47.     }
  48.     header .solapas
  49.     {
  50.         float:none;
  51.         border:1px dotted #ffffff;
  52.     }
  53.     header .solapas table
  54.     {
  55.         width:360px;
  56.         /*margin:25px 0;*/
  57.         
  58.     }
  59.     header .iconos img
  60.     {
  61.         width:90px;
  62.         height:58px;
  63.     }
  64.     header .iconos table
  65.     {
  66.         width:360px;
  67.     }
  68.     header #menu ul{
  69.         list-style: none;
  70.         font-size: 14px;
  71.         margin:0;
  72.         padding:0;
  73.     } 
  74.  
  75.     header #menu li{
  76.         display: block;
  77.         text-transform: uppercase;
  78.         text-align: left;
  79.     }
  80.     header #nav-mobile{
  81.         display: none;
  82.         background: url("../imagenes/nav.png") no-repeat left center;
  83.         width: 360px;
  84.         height: 50px;
  85.         /*position: relative;
  86.         top:0;*/
  87.  
  88.     }   
  89.  
  90.     header #nav-mobile{ display: block; }
  91.     header #menu{
  92.         width: 100%;
  93.         float: none;
  94.         margin:0 0 5px 0;
  95.         padding:0;
  96.     }
  97.     header #menu ul{
  98.  
  99.         max-height: 0;
  100.         overflow: hidden;
  101.         margin:0;
  102.     }
  103.     header #menu li{
  104.         background: #20337f; 
  105.         height: 20px;
  106.         float: none;    
  107.         margin:0;
  108.         padding: 5px 10px;
  109.         text-align:center;
  110.         font-size:18px;
  111.         border-bottom:1px solid #ffffff;
  112.  
  113.     }
  114.  
  115.     header #menu li:last-child{ border-bottom: 1;}
  116.     header #menu li a{
  117.         
  118.         line-height: normal;
  119.         color:#ffffff;
  120.         font-weight: bold;
  121.         text-transform:uppercase;
  122.         text-decoration:none;
  123.  
  124.     }
  125.     header #menu ul.open-menu{
  126.         max-height: 420px;
  127.         -webkit-transition: max-height .4s;
  128.         -moz-transition: max-height .4s;
  129.         -ms-transition: max-height .4s;
  130.         -o-transition: max-height .4s;
  131.         transition: max-height .4s;
  132.     }
  133.     /********** agenda ********************/
  134.     header #agenda ul{
  135.         list-style: none;
  136.         font-size: 14px;
  137.         margin:0;
  138.         padding:0;
  139.     } 
  140.  
  141.     header #agenda li{
  142.         display: block;
  143.         text-transform: uppercase;
  144.         text-align: left;
  145.     }
  146.     header #tit-mobile{
  147.         display: none;
  148.         background: url("../imagenes/nav-agenda.png") no-repeat left center;
  149.         width: 360px;
  150.         height: 30px;
  151.         /*position: relative;
  152.         top:0;*/
  153.     }   
  154.     header #agenda .tit-mobile
  155.         {
  156.             font-family: "FreesiaUPC", "Arial";
  157.             font-size:0px;
  158.             color:#ffffff;
  159.             height:60px;
  160.             padding:0 5px;
  161.         }
  162.     header #tit-mobile{ display: block; }
  163.     header #agenda{
  164.         width: 100%;
  165.         float: none;
  166.         margin:0 0 5px 0;
  167.         padding:0;
  168.     }
  169.     header #agenda ul{
  170.  
  171.         max-height: 0;
  172.         overflow: hidden;
  173.         margin:0;
  174.     }
  175.     header #agenda li{
  176.         background: #20337f; 
  177.         height: 20px;
  178.         float: none;    
  179.         margin:0;
  180.         padding: 5px 10px;
  181.         text-align:center;
  182.         font-size:18px;
  183.         border-bottom:1px solid #ffffff;
  184.  
  185.     }
  186.  
  187.     header #agenda li:last-child{ border-bottom: 1;}
  188.     header #agenda li a{
  189.         
  190.         line-height: normal;
  191.         color:#ffffff;
  192.         font-weight: bold;
  193.         text-transform:uppercase;
  194.         text-decoration:none;
  195.  
  196.     }
  197.     header #agenda ul.open-menu{
  198.         max-height: 420px;
  199.         -webkit-transition: max-height .4s;
  200.         -moz-transition: max-height .4s;
  201.         -ms-transition: max-height .4s;
  202.         -o-transition: max-height .4s;
  203.         transition: max-height .4s;
  204.         background: url("../imagenes/nav2.png") no-repeat left center;
  205.     }
  206. }
  207. @media screen and (min-width: 421px)
  208. {
  209.     body{
  210.     background-color:#eeeeee;
  211.     font-family: Arial;
  212.     margin:0;
  213.     width:100%;
  214. }
  215. header
  216. {
  217.     background-color:#ffffff;
  218.     width:100%;
  219.     min-height:575px;
  220.     margin:0;
  221. }
  222.         header .navigation-toggle
  223.         {
  224.             
  225.         }
  226.         header #menu
  227.         {
  228.             width:950px;
  229.             text-align:right;
  230.             float:right;
  231.             height:0;
  232.             position:relative;
  233.             z-index:1;
  234.             top:-70px;
  235.             left:130px;
  236.             padding:0 0px 0 0;
  237.         }
  238.         header #menu ul
  239.         {
  240.             overflow:hidden;
  241.             list-style:none;
  242.             margin-top:20px;
  243.         }
  244.         header #menu ul li {
  245.             float:left;
  246.         }
  247.         header #menu ul li a
  248.         {
  249.             padding: 0 2px;
  250.             color:#000000;
  251.             text-decoration:none;
  252.             font-family: "FreesiaUPC", "Arial";
  253.             font-size:21px;
  254.             text-transform:uppercase;
  255.         }
  256.         header #menu ul li a:hover
  257.         {
  258.             background-color:#DEE1E6;
  259.         }
  260.         header .logo
  261.         {
  262.             text-align:left;
  263.             overflow:visible;
  264.             width:1010px;
  265.             height:100px;   
  266.             margin:0;
  267.             padding:0;
  268.  
  269.         }
  270.         header .logo2
  271.         {
  272.             width:640px;
  273.             float:left;
  274.             padding: 0 0 0 0px;
  275.             overflow:hidden;
  276.         }
  277.         header .telefono
  278.         {
  279.             float:right;
  280.         }
  281.         header .contlayus
  282.         {
  283.             width:1010px;
  284.             height:250px;
  285.             overflow:hidden;
  286.             position:relative;
  287.             top:-15px;
  288.             
  289.         }
  290.         header .ofertas
  291.         {
  292.             width:200px;
  293.             padding:20px 0 0 20px;
  294.             float:left;
  295.             overflow:auto;
  296.             margin:0;   
  297.  
  298.         }
  299.         header .ofertas td
  300.         {
  301.             vertical-align:top;
  302.             height:70px;
  303.             margin:0;
  304.             padding:0;
  305.         }
  306.         header .loopedSlider
  307.         {
  308.             float:right;
  309.             padding:0 20px 0 0;
  310.             position:relative;
  311.             top:-15px;
  312.             height:165;
  313.             
  314.         }
  315.         header .solapas
  316.         {
  317.             
  318.             width:280px;
  319.             height:0px;
  320.             text-align:right;
  321.             position:absolute;
  322.             z-index:10;
  323.             top:0px;
  324.             margin:0px;
  325.             padding:0 0 0 710px;
  326.         }
  327.  
  328.         header .iso9001
  329.         {
  330.             width:280px;
  331.             height:0;
  332.             text-align:right;
  333.             position:relative;
  334.             z-index:15;
  335.             top:-130px;
  336.             margin:0px;
  337.             left:130px;
  338.             padding:0px 0 0 75px;
  339.             
  340.         }
  341.         header #agenda
  342.         {
  343.             height:65px;
  344.             text-align:left;
  345.             margin:-15px 20px 10px 20px;
  346.             padding:0px;
  347.             overflow:hidden;
  348.             background-color:#DEE1E6;
  349.         }
  350.         header #agenda .tit-mobile
  351.         {
  352.             font-family: "FreesiaUPC", "Arial";
  353.             font-size:19px;
  354.             height:5px;
  355.             padding:0 5px;
  356.             color:#000000;
  357.         }
  358.         header #agenda ul
  359.         {
  360.             height:5px;
  361.         }
  362.         header #agenda ul li
  363.         {
  364.             margin:0;
  365.             padding:0 15px 0 0;
  366.             list-style-type: none;
  367.             display: inline;
  368.  
  369.         }
  370.         
  371.         header #agenda .alink
  372.         {
  373.             color:#20317B;
  374.         }
  375.         header #agenda .alink:hover
  376.         {
  377.             color:#000000;
  378.         }
  379.         header #agenda li a
  380.         {
  381.             font-family: "FreesiaUPC", "Arial";
  382.             color:#000000;
  383.             font-family: "FreesiaUPC", "Arial";
  384.             font-size:22px;
  385.             text-transform:uppercase;
  386.         }
  387.         header .iconos
  388.         {
  389.             text-align:left;
  390.             padding: 0 20px;
  391.         }
  392.         header .iconos table
  393.         {
  394.             width:982px;
  395.         }
  396. }
  #3 (permalink)  
Antiguo 22/04/2015, 13:08
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años
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
  #4 (permalink)  
Antiguo 22/04/2015, 15:15
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años
Puntos: 3
Respuesta: css para móviles en chrome
Solucionado, faltaba la siguiente metatag
<meta name=viewport content="width=device-width, initial-scale=1">
Si a alguien le sirve, adelante!!!

Etiquetas: chrome, float, html, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:11.