Как добиться респонсив в UIKit?

Question

[Илья]

Не могу приручить UIKit. Совсем плох в нем. Нужно добиться респонсива. Есть фоновая картинка. На ней (внизу, центр) висит layout с текстом. На большом мониторе все норм. Но на планшете и мобиле layout увеличивается, закрывая собой всю картинку. Уже устал листать документацию. Кажется, постоянно что-то упускаю, раз до сих пор не могу решить задачу.
Может кто знает как помочь?

<div class="background-position">
		<div class="uk-cover-background uk-position-relative">

			<img src="../nucleos/img/top-img.png" width="100%" height="100%" alt="background">
			<div class="uk-overlay uk-overlay-primary uk-h1 uk-position-medium uk-position-bottom-center uk-overlay uk-overlay-default uk-text-center uk-position-absolut uk-responsive-width" >
				Together we can Revolutionize<br>Information Delivery
			</div>
		</div>
	</div>

Изначально:


При сжатии экрана:

Comments

[alex-1917]

про REM почитайте!

Answer 1

[Пащук Илья]

С UIKit еще не работал, но что-то мне подсказывает что если нету описания для адаптивности текста, то скорее всего через медиа правила, то есть:

@media (max-width: @your-param) {  
    .uk-text-small,
    . uk-h1 { font-size: 20px; }  
}

Ну или может есть какие-то параметры через атрибут на подобии:

<div uk-h1="ratio:2" >
        Together we can Revolutionize<br>Information Delivery
      </div>