Estou enfrentando um problema de mal comportamento dos elementos html no modo mobile da minha página. Toda vez que eu clico na imagem do produto,o teclado abre antes de ser redirecionado para a url que o link aponta, ocasionando então um aspecto de bug.
Meu códgio HTML
<h2 class="product__header">
<a href="http://localhost/configuravel/" itemprop="url" title="Mais detalhes" class="product-link">
<span class="product__image product-image">
<span itemprop="image" class="product-image img-260x260">
<img id="product-collection-image-4" class="product-collection-image" src="http://localhost/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/c/a/cartas.png" default-src="http://localhost/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/c/a/cartas.png" data-original="http://localhost/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/c/a/cartas.png" product-id="4" width="260" height="260" />
</span>
</span>
</a>
</h2>
Estilo CSS
.product__header {
flex: 0 0 auto;
padding: 1rem 0 1rem 1rem;
}
.product-link { display: block }
.product__image {
display: block;
position: relative;
padding: 1px 1px 0;
}
.product-image {
display: block;
margin-bottom: 10px
}
.products__list img {
display: block;
margin-left: auto;
margin-right: auto;
}
img {
vertical-align: top;
max-width: 100%;
height: auto;
}
Alguém pode por gentileza me ajudar?