Использую vue.js
вывод товара
<div v-for="bike in bikes" class="col-sm-6 col-lg-3" >
<div class="product-item">
<span class="top-sale">{{ bike.id }}</span>
<ul class="product-icon-top">
<li><a href="#"><i class="fa fa-refresh" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
</ul>
<a href="#" class="product-img"><img class="lazy"
src="src/assets/img/placeholder-all.png"
data-src="src/assets/img/prod-1.png"
alt="product"></a>
<div class="product-item-cover">
<div class="price-cover">
<div class="new-price">$1.699</div>
<div class="old-price">$1.799</div>
</div>
<h6 class="prod-title"><a href="#">Granite Peak 24" <br>Girls
Mountain Bike</a></h6>
<a href="#" class="btn"><span>buy now</span></a>
</div>
<div class="prod-info">
<ul class="prod-list">
<li>Frame Size: <span>17</span></li>
<li>Class: <span>City</span></li>
<li>Number of speeds: <span>7</span></li>
<li>Type: <span>Rigid</span></li>
<li>Country registration: <span>USA</span></li>
</ul>
</div>
</div>
</div>
код запроса
data() {
return {
bikes: []
}
},
mounted() {
this.getBike();
},
methods:{
getBike(){
this.axios.get('http://laravel.vue.creto.shop/public/api/bikes/8').then(res => this.bikes = res.data);
}
}
после срабатывания css ломается. как только меняю размер экрана то все приходи в норму