.main::after не покрывает всю высоту .main в мобильном представлении ⇐ CSS

[Anonymous]

Я установил ::after в свой div .main. На ноутбуке и настольном компьютере .main::after покрывает весь элемент div .main, но не в мобильном представлении. Я попытался установить высоту .main и main::after на 100%, но желаемого дизайна так и не добился.

Это вид с ноутбука:

введите здесь описание изображения

Это вид на мобильных устройствах:

введите здесь описание изображения

Я хочу, чтобы цвет градиента по-прежнему был виден в нижней части экрана на мобильных устройствах.

* { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } .основной { фон: url("images/business-man-2452808_1280.jpg") без повтора; размер фона: обложка; высота: 100вх; } .main::after { содержание: ""; позиция: абсолютная; верх: 0; правильно: 0; ширина: 100%; высота: 100вх; фоновое изображение: линейный градиент( 118 градусов, RGB(4, 25, 38), rgba(102, 128, 154, 0,5) ); } .container-fluid { заполнение: 0; } навигация { цвет фона: RGB(4, 25, 38); максимальная ширина: 17рем; высота: 100вх; отступ: 1рем; плыть налево; положение: относительное; z-индекс: 2; } .clearfix::after { содержание: ""; ясно: оба; дисплей: стол; } .гарнитура { цвет: RGB(3, 163, 212); размер шрифта: 1.2rem; } .text-жирный { вес шрифта: 700; } .text-normal { вес шрифта: нормальный; } час { поле: 2 пикселя 0; } .имя { размер шрифта: 1,5рем; } .lower-nav-links а { цвет: RGB(78, 99, 121); заполнение: 1,5рем 0; нижняя граница: 3 пикселя сплошной RGB (9, 28, 42); } .lower-nav-links li:last-child a { нижняя граница: нет; } .slogan-container { позиция: абсолютная; правильно: 0; маржа: 7рем 0; ширина: 75%; } .слоган { белый цвет; положение: относительное; z-индекс: 2; вес шрифта: 700; размер шрифта: 3rem; поле-дно: 2rem; } .play-audio { z-индекс: 2; положение: относительное; } .play-audio img { ширина: 10%; } .play-audio .soundwave { ширина: 75%; поле слева: 1рем; максимальная высота: 17рем; } @media screen и (максимальная ширина: 667 пикселей) { навигация { переполнение: прокрутка; } .slogan-container { маржа: 1,5рем 0; ширина: 60%; } .слоган { размер шрифта: 2rem; } } @media screen и (максимальная ширина: 414 пикселей) { .основной { фоновая позиция: по центру слева; высота: 100%; } навигация { ширина: 100%; максимальная ширина: нет; плавающий: нет; } .профиль ли { выравнивание текста: по центру; } .slogan-container { ширина: 100%; маржа: 0; положение: относительное; } .слоган { выравнивание текста: по центру; } .play-audio { дополнение: 0 2рем; } [*] Документ

• Риз Дель Круз Внешний разработчик
• 
  О
• 
  Опыт
• 
  Демо
• 
  Отзывы
• 
  Контакт

Дизайн.
Развивать.
Восторг.



Я пытался решить проблему с помощью чатгпта, но безуспешно. Я тоже пытался гуглить, но не нашел ответа.