Привет, собственно, верстаю на UIKit 3, и тут такая дилемма.
Вот, как выглядит элемент (card) на 15-ти дюймовом мониторе:
А вот, как выглядит тот же элемент, если уменьшить масштаб (эмуляция большого экрана):
Зашел на официальную документацию (
https://getuikit.com/docs/card), пролистав чуть ниже, можно увидеть card с картинкой. Так вот, я также поигрался с масштабом - там же все нормально, card'ы не расплываются.
Перерыл в коде страницы кучу классов, и все равно не получается так сделать.
Вот мой код:
spoiler<div class="uk-background-muted uk-padding uk-position-relative">
<div class="uk-child-width-1-4@m uk-position-relative uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-small uk-card-default">
<div class="uk-card-media-top">
<img src="image/product1.jpg" class="uk-image-crop-top">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Игрушки</h3>
<p>Самые качественные и популярные игрушки для детей</p>
<button class="uk-button uk-button-small uk-button-secondary uk-align-center uk-width-1-1">Подробнее</button>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-small uk-card-default">
<div class="uk-card-media-top">
<img src="image/product1.jpg" class="uk-image-crop-top">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Игрушки</h3>
<p>Самые качественные и популярные игрушки для детей</p>
<button class="uk-button uk-button-small uk-button-secondary uk-align-center uk-width-1-1">Подробнее</button>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-small uk-card-default">
<div class="uk-card-media-top">
<img src="image/product1.jpg" class="uk-image-crop-top">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Игрушки</h3>
<p>Самые качественные и популярные игрушки для детей</p>
<button class="uk-button uk-button-small uk-button-secondary uk-align-center uk-width-1-1">Подробнее</button>
</div>
</div>
</div>
</div>
</div>
Средний
