Tema: Sombra con .css no se visualiza en dispositivos moviles
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/08/2016, 18:40
Avatar de ceaped
ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 10 meses
Puntos: 9
Pregunta Sombra con .css no se visualiza en dispositivos moviles
Buenas noches

Utilizo una sombra así:

Código CSS: 
Ver original
  1. media screen and (min-width: 240px) {
  2.     
  3. /* Campo de busqueda */
  4. #tipue_search_input {
  5.     font-family: 'Maven Pro', sans-serif;
  6.     font-size: 0.9em;
  7.     color: #32520C;
  8.     text-align: center;
  9.     width: 75%;
  10.     height: 75px;
  11.     margin-top: 0;
  12.     margin-bottom: 20px;
  13.     border: none;
  14.     border-radius: 0px;
  15.     background-color: #FFFFFF;
  16.     float: left;
  17.     
  18.     /* Redondear esquinas */
  19.     border-radius: 10px 0px 0px 10px;
  20.     -moz-border-radius: 10px 0px 0px 10px;
  21.     -webkit-border-radius: 10px 0px 0px 10px;
  22.     border: 0px solid #000000;
  23.     
  24.     /* Sombra */        
  25.     -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3),0 0 20px rgba(0, 0, 0, 0.1) inset;
  26.     -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
  27.     box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
  28.     }
  29. }

De igual forma para computadores:

Código CSS: 
Ver original
  1. @media screen and (min-width: 640px) {
  2. #tipue_search_input {
  3.     font-family: 'Maven Pro', sans-serif;
  4.     font-size: 16px;
  5.     color: #32520C;
  6.     text-align: center;
  7.     width: 580px;
  8.     height: 75px;
  9.     margin: 0px;
  10.     background-color: #FFFFFF;
  11.     border: none;
  12.     
  13.     /* Redondear esquinas */
  14.     border-radius: 10px 0px 0px 10px;
  15.     -moz-border-radius: 10px 0px 0px 10px;
  16.     -webkit-border-radius: 10px 0px 0px 10px;
  17.     border: 0px solid #000000;
  18.     
  19.     /* Sombra */        
  20.     -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3),0 0 20px rgba(0, 0, 0, 0.1) inset;
  21.     -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
  22.     box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
  23. }
  24. }

En computadores se ve bien, pero en celulares y tablets no

¿Cómo hago para que se visualice bien?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario