Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/10/2017, 19:51
Avatar de mortiprogramador
mortiprogramador
Colaborador
 
Fecha de Ingreso: septiembre-2009
Ubicación: mortuoria
Mensajes: 3.805
Antigüedad: 14 años, 7 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