0
I am facing a problem of bad behavior of the html elements in the mobile mode of my page. Every time I click on the product image, the keyboard opens before being redirected to the url the link points to, causing a bug aspect.
My HTML codex
<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>
CSS style
.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;
}
Will someone please help me?