[SOLUCIONADO] Template con distinto comportamiento en smartphone

[mortiprogramador]

Saludo

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

Código HTML:

<div class="col_1_of_3 span_1_of_3"> 
    <a href="single.html">
        <div class="inner_content clearfix">
            <div class="styleimg">
                <img src="images/pic2.jpg" alt=""/>
            </div>
            <div class="sale-box1"><span class="on_sale title_shop">- 50%</span></div>    
            <div class="price">
                <div class="cart-left">
                    <p class="title">Lorem Ipsum simply</p>
                    <div class="price1">
                      <span class="reducedfrom">$66.00</span>
                      <span class="actual">$12.00</span>
                    </div>
                </div>
                <div class="cart-right"> </div>
                <div class="clear"></div>
            </div>                
        </div>
    </a>
</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.

[ArturoGallegos]

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

tu tienes

Código CSS:

.sale-box1 {
    height: 100px;
    left: 0px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100px;
}
 

debe de ser

Código CSS:

.sale-box1 {
    height: 100%;
    left: 0px;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100%;
    z-index: 9;
}
 

[mortiprogramador]

¡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!