Buenas noches
Utilizo una sombra así:
Código CSS:
Ver originalmedia screen and (min-width: 240px) {
/* Campo de busqueda */
#tipue_search_input {
font-family: 'Maven Pro', sans-serif;
font-size: 0.9em;
color: #32520C;
text-align: center;
width: 75%;
height: 75px;
margin-top: 0;
margin-bottom: 20px;
border: none;
border-radius: 0px;
background-color: #FFFFFF;
float: left;
/* Redondear esquinas */
border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
border: 0px solid #000000;
/* Sombra */
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3),0 0 20px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
}
De igual forma para computadores:
Código CSS:
Ver original@media screen and (min-width: 640px) {
#tipue_search_input {
font-family: 'Maven Pro', sans-serif;
font-size: 16px;
color: #32520C;
text-align: center;
width: 580px;
height: 75px;
margin: 0px;
background-color: #FFFFFF;
border: none;
/* Redondear esquinas */
border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
border: 0px solid #000000;
/* Sombra */
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3),0 0 20px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
}
En computadores se ve bien, pero en celulares y tablets no
¿Cómo hago para que se visualice bien?
Gracias por su ayuda