Почему сбивается сетка UIkit при просмотре с телефона?

Question

[kunjut19]

Есть такой код. В режиме разработчика на мобильных устройствах все выглядит нормально. Но когда открываешь ту же страницу, но уже с телефона (а именно с айфонов 8 и 10), сетка сбивается - второй элемент (который должен находиться в первом ряду, во второй колонке) съезжает на второй ряд в первую колонку, и всю сетку перекашивает. Вот так:

Подскажите, пожалуйста, в чем может быть дело? Я пытался менять размеры элементов, отступы, но ничего так и не сработало.

Answer 1

[Андрей]

Отделите контейнер и грид
т.е.

<div class="main_container uk-container">
   <div class="uk-child-width-1-2 uk-child-width-1-3@s ..." uk-grid>
      ...

не нужно сбрасывать отрицательный margin

Comments

[kunjut19]

Спасибо большое!!! А можете, пожалуйста, помочь еще с одним моментом? Как сделать, чтобы блок с текстом и анимацией был вертикально по центру относительно контейнера-родителя, а не экрана? код прилагаю

[Андрей]

На самом деле странный пример. Непонятно что куда и как там требуется.
не знаю задумывалось так или нет, но предполагаю, что
по .uk-navbar-center можно и ранее "запихнуть", между left и right, тогда и строка целая получится, т.е. один navbar в одну ровную линию.
по "...блок с текстом и анимацией..." не понял вообще что там в итоге должно получиться. дальнейшая судьба непонятна. то что там есть. нужно пересматривать. возможно даже переделать другим способом.
- Обратить внимание! .uk-position-center установлен, что одновременно делает элемент абсолютно позиционируемым...
- Предложение: возможно стоит убрать .uk-position-center и посмотреть в сторону Flex? Он отлично справляется во множестве случаев

[kunjut19]

Андрей, все в одну строку не получится, потому что по идее вместо цифр 1 и 2 в готовом проекте должно быть несколько "вкладок", и на меньших экранах они просто не поместятся между left и right
по второму пункту - нужно, чтобы в пространстве между навигационной панелью с ссылками и нижним краем экрана точно по центру был тот самый блок с текстом и анимацией. Но в моем случае он по центру между верхним и нижним краями экрана

[Андрей]

kunjut19, ну так не видно где родитель к примеру с position: relative;? вот оно и стоит щас так

[kunjut19]

Андрей, а div с классом containerразве не является таким родителем?

[Андрей]

kunjut19, нет конечно. точно не в данном случае

[kunjut19]

Андрей, как я понял, проблема вот в чем. Я пытаюсь разместить этот злосчастный блок вертикально по центру в container. Но так как сам container растягивается в длину своим содержимым, а своей собственной высоты не имеет, то вертикально по центру его содержимое просто не может разместиться. Теперь мне нужно, чтобы container занимал всю высоту экрана за минусом высоты двух навигационных панелек. А с этим мне поможет uk-height-viewport="offset-top: true"