Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Template con distinto comportamiento en smartphone

Estas en el tema de Template con distinto comportamiento en smartphone en el foro de CSS en Foros del Web. Saludo Estoy modificando una plantilla que me pasaron para un proyecto en donde se muestran productos con el siguiente código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver ...
  #1 (permalink)  
Antiguo 25/10/2017, 19:51
Avatar de mortiprogramador
Colaborador
 
Fecha de Ingreso: septiembre-2009
Ubicación: mortuoria
Mensajes: 3.805
Antigüedad: 15 años, 3 meses
Puntos: 214
Busqueda Template con distinto comportamiento en smartphone

Saludo

Estoy modificando una plantilla que me pasaron para un proyecto
en donde se muestran productos con el siguiente código:

Código HTML:
Ver original
  1. <div class="col_1_of_3 span_1_of_3">
  2.     <a href="single.html">
  3.         <div class="inner_content clearfix">
  4.             <div class="styleimg">
  5.                 <img src="images/pic2.jpg" alt=""/>
  6.             </div>
  7.             <div class="sale-box1"><span class="on_sale title_shop">- 50%</span></div>    
  8.             <div class="price">
  9.                 <div class="cart-left">
  10.                     <p class="title">Lorem Ipsum simply</p>
  11.                     <div class="price1">
  12.                       <span class="reducedfrom">$66.00</span>
  13.                       <span class="actual">$12.00</span>
  14.                     </div>
  15.                 </div>
  16.                 <div class="cart-right"> </div>
  17.                 <div class="clear"></div>
  18.             </div>                
  19.         </div>
  20.     </a>
  21. </div>

El asunto se visualiza bien en todos los dispositivos,
pero la idea es que al dar clic sobre el elemento
(sin importar si dan clic a la imagen, o al botón) vaya al detalle del producto que se quiere ver.

El problema es justo cuando entran a ver el detalle, pues en pcs, laptops y tablets funciona,
pero en smartphones solo funciona si pulsan en la esquina superior izquierda (donde se ve el porcentaje del descuento)

He modificado el funcionamiento poniendo href tanto en la imagen
como en el botón del carro de compras.
También he intentado quitar los href y llamar funciones javascript
tanto en la imagen como en el botón, pero el resultado es el mismo,
no funciona en smartphones como si lo hace en otros dispositivos.

¿Les ha ocurrido esto?
¿O tal vez puedan darme una idea sobre donde modificar?

He revisado los css y no veo nada extraño, pero tal vez se me esta pasando algo.

Pueden ver el funcionamiento en esta página: piggypon.com

Gracias.

P.D: He realizado otras pruebas, y al parecer el problema es con smartphones
de pantallas con width menor o igual a 320px con orientación vertical,
si cambio a horizontal mejora el comportamiento.
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, si nadie puede detenerte, te conviertes en algo muy diferente."
Visita piggypon.com
  #2 (permalink)  
Antiguo 26/10/2017, 08:09
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Template con distinto comportamiento en smartphone

tu problema es de CSS clase .sale-box1 en la linea 4046 archivo style.css

tu tienes
Código CSS:
Ver original
  1. .sale-box1 {
  2.     height: 100px;
  3.     left: 0px;
  4.     overflow: hidden;
  5.     position: absolute;
  6.     text-align: center;
  7.     top: 0px;
  8.     width: 100px;
  9. }

debe de ser
Código CSS:
Ver original
  1. .sale-box1 {
  2.     height: 100%;
  3.     left: 0px;
  4.     overflow: hidden;
  5.     position: absolute;
  6.     text-align: center;
  7.     top: 0px;
  8.     width: 100%;
  9.     z-index: 9;
  10. }
  #3 (permalink)  
Antiguo 26/10/2017, 10:10
Avatar de mortiprogramador
Colaborador
 
Fecha de Ingreso: septiembre-2009
Ubicación: mortuoria
Mensajes: 3.805
Antigüedad: 15 años, 3 meses
Puntos: 214
Respuesta: Template con distinto comportamiento en smartphone

¡Maestro!

Esa era la jugada.

¿A donde envío las cervezas?
(A todas estas, no había una imagen de birra en las opciones del editor del post?)

¡Gracias!
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, si nadie puede detenerte, te conviertes en algo muy diferente."
Visita piggypon.com

Etiquetas: class, html, javascript, php, smartphone
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




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