Tengo un problema similar, pero con chrome.
Con firefox (al menos el emulador) funciona con el emulador de Chrome no!!!
Codigo del css
Código CSS:
Ver original@font-face {
font-family: "FreesiaUPC";
src: url("../css/upcfl.eot");
}
@font-face {
font-family: "FreesiaUPC";
src: url("../css/upcfl.ttf");
}
@media screen and (max-width : 420px)
{
body{
background-color:#eeeeee;
font-family: Arial;
margin:0;
width:360px;
}
header
{
background-color:#ffffff;
width:360px;
margin:0;
}
header .iso9001
{
display: none;
}
header .contlayus
{
width:360px;
height:280px;
overflow:visible;
}
header .ofertas
{
width:360px;
}
header .ofertas div
{
float:left;
}
header .ofertas img
{
width:120px;
}
header .solapas
{
float:none;
border:1px dotted #ffffff;
}
header .solapas table
{
width:360px;
/*margin:25px 0;*/
}
header .iconos img
{
width:90px;
height:58px;
}
header .iconos table
{
width:360px;
}
header #menu ul{
list-style: none;
font-size: 14px;
margin:0;
padding:0;
}
header #menu li{
display: block;
text-transform: uppercase;
text-align: left;
}
header #nav-mobile{
display: none;
background: url("../imagenes/nav.png") no-repeat left center;
width: 360px;
height: 50px;
/*position: relative;
top:0;*/
}
header #nav-mobile{ display: block; }
header #menu{
width: 100%;
float: none;
margin:0 0 5px 0;
padding:0;
}
header #menu ul{
max-height: 0;
overflow: hidden;
margin:0;
}
header #menu li{
background: #20337f;
height: 20px;
float: none;
margin:0;
padding: 5px 10px;
text-align:center;
font-size:18px;
border-bottom:1px solid #ffffff;
}
header #menu li:last-child{ border-bottom: 1;}
header #menu li a{
line-height: normal;
color:#ffffff;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
}
header #menu ul.open-menu{
max-height: 420px;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-ms-transition: max-height .4s;
-o-transition: max-height .4s;
transition: max-height .4s;
}
/********** agenda ********************/
header #agenda ul{
list-style: none;
font-size: 14px;
margin:0;
padding:0;
}
header #agenda li{
display: block;
text-transform: uppercase;
text-align: left;
}
header #tit-mobile{
display: none;
background: url("../imagenes/nav-agenda.png") no-repeat left center;
width: 360px;
height: 30px;
/*position: relative;
top:0;*/
}
header #agenda .tit-mobile
{
font-family: "FreesiaUPC", "Arial";
font-size:0px;
color:#ffffff;
height:60px;
padding:0 5px;
}
header #tit-mobile{ display: block; }
header #agenda{
width: 360px;
float: none;
margin:0 0 5px 0;
padding:0;
}
header #agenda ul{
max-height: 0;
overflow: hidden;
margin:0;
}
header #agenda li{
background: #20337f;
height: 20px;
float: none;
margin:0;
padding: 5px 10px;
text-align:center;
font-size:18px;
border-bottom:1px solid #ffffff;
}
header #agenda li:last-child{ border-bottom: 1;}
header #agenda li a{
line-height: normal;
color:#ffffff;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
}
header #agenda ul.open-menu{
max-height: 420px;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-ms-transition: max-height .4s;
-o-transition: max-height .4s;
transition: max-height .4s;
background: url("../imagenes/nav2.png") no-repeat left center;
}
}
@media screen and (min-width: 421px)
{
body{
background-color:#eeeeee;
font-family: Arial;
margin:0;
width:100%;
}
header
{
background-color:#ffffff;
width:100%;
min-height:575px;
margin:0;
}
header .navigation-toggle
{
}
header #menu
{
width:950px;
text-align:right;
float:right;
height:0;
position:relative;
z-index:1;
top:-70px;
left:130px;
padding:0 0px 0 0;
}
header #menu ul
{
overflow:hidden;
list-style:none;
margin-top:20px;
}
header #menu ul li {
float:left;
}
header #menu ul li a
{
padding: 0 2px;
color:#000000;
text-decoration:none;
font-family: "FreesiaUPC", "Arial";
font-size:21px;
text-transform:uppercase;
}
header #menu ul li a:hover
{
background-color:#DEE1E6;
}
header .logo
{
text-align:left;
overflow:visible;
width:1010px;
height:100px;
margin:0;
padding:0;
}
header .logo2
{
width:640px;
float:left;
padding: 0 0 0 0px;
overflow:hidden;
}
header .telefono
{
float:right;
}
header .contlayus
{
width:1010px;
height:250px;
overflow:hidden;
position:relative;
top:-15px;
}
header .ofertas
{
width:200px;
padding:20px 0 0 20px;
float:left;
overflow:auto;
margin:0;
}
header .ofertas td
{
vertical-align:top;
height:70px;
margin:0;
padding:0;
}
header .loopedSlider
{
float:right;
padding:0 20px 0 0;
position:relative;
top:-15px;
height:165;
}
header .solapas
{
width:280px;
height:0px;
text-align:right;
position:absolute;
z-index:10;
top:0px;
margin:0px;
padding:0 0 0 710px;
}
header .iso9001
{
width:280px;
height:0;
text-align:right;
position:relative;
z-index:15;
top:-130px;
margin:0px;
left:130px;
padding:0px 0 0 75px;
}
header #agenda
{
height:65px;
text-align:left;
margin:-15px 20px 10px 20px;
padding:0px;
overflow:hidden;
background-color:#DEE1E6;
}
header #agenda .tit-mobile
{
font-family: "FreesiaUPC", "Arial";
font-size:19px;
height:5px;
padding:0 5px;
color:#000000;
}
header #agenda ul
{
height:5px;
}
header #agenda ul li
{
margin:0;
padding:0 15px 0 0;
list-style-type: none;
display: inline;
}
header #agenda .alink
{
color:#20317B;
}
header #agenda .alink:hover
{
color:#000000;
}
header #agenda li a
{
font-family: "FreesiaUPC", "Arial";
color:#000000;
font-family: "FreesiaUPC", "Arial";
font-size:22px;
text-transform:uppercase;
}
header .iconos
{
text-align:left;
padding: 0 20px;
}
header .iconos table
{
width:982px;
}
}
Lo que necesito, es que si el ancho es menor que 421px se vea de una forma, si es mayor, que se vea de otra.
Si me pueden ayudar se los agradeceré mucho!!!