Отзывчивый макет: смены изображения и подпись исчезает в мобильном виде ⇐ Html

[Anonymous]

Я пытаюсь смоделировать макет и поведение, наблюдаемое на следующей странице:
https://www.whitehouse.gov/administrati ... d-j-trump/
На рабочем столе все выглядит нормально-изображение и текст правильно расположены в синем фоновой области. Однако, когда я переключаюсь на адаптивное или мобильное представление, я замечаю неожиданное поведение: < /p>
изображение смещается в синем фоне так, как я не ожидал. Я хотел бы внимательно повторить отзывчивое поведение, показанное на официальной странице Белого дома, включая то, как ведут себя изображение и текст при изменении размера. class = "Snippet">

Код: Выделить всё

 .hero-section {
background: #112E51;
height:20 rem;
position: relative;
overflow: visible;
text-align: center;
color: white;
margin-bottom:20rem;
}

/* At screen widths 1100px and below */
@media (max-width: 1100px) {
.hero-section {
height: 25rem;
}
}

/* At screen widths 479px and below */
@media (max-width: 479px) {
.hero-section {
height: 20rem;
}
}

.portrait {
position: relative;
top: 2rem;
}< /code>
 





ABCD

xyz test test


[img]https://www.gardenia.net/wp-content/uploads/2023/05/types-of-flowers-780x520.webp[/img]
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever

Подробнее здесь: https://stackoverflow.com/questions/797 ... obile-view