CSS Flex — рабочий стол в порядке, на мобильных устройствах слишком много пустого пространства? ⇐ CSS

[Anonymous]

Всем привет!

Я только что занялся программированием веб-сайтов после того, как не занимался этим 15 лет, и осваивал новые технологии.

Flex отлично подходит для того, что я хочу/нужно, и в настольных браузерах он отображает мой дизайн именно так, как я хочу. Но на мобильных устройствах (настоящих мобильных устройствах или смоделированных на настольных компьютерах) под фактическим контейнером flex div примерно в 4 раза больше пробелов. И я понятия не имею, откуда это взялось.

Здесь вы можете увидеть HTML-документ:
http://nick.jaussi.eu/web2023/
как это должно выглядеть и как выглядит на рабочем столе
как это выглядит на моделируемом мобильном телефоне

Соответствующий код:

@charset "UTF-8"; /* CSS-документ */ *, :после, :перед { размер коробки: граница-коробка; заполнение: 0; маржа: 0; } тело { высота: 100%; } .flex-история { дисплей: гибкий; высота: 100вх; гибкое направление: строка; } .flex-изображение, .flex-описание { высота: 80вх; ширина: авто; поле: 6vh 6vw 14vh; высота строки: 0; } .flex-изображение img { высота: 100%; ширина: авто;







































Осмотрите веб-сайт и попытайтесь выяснить, какой контейнер больше, чем вид веб-сайта. Не нашел. Проверьте еще раз гибкий контейнер на w3schools.com, в заголовок добавлена ​​мета-точка обзора:

На самом деле не знаю, что нужно искать в Google, чтобы понять мою проблему, поэтому спасибо за любой совет или помощь!