Чтобы текст отображался под изображением в уменьшенном "мобильном" представлении

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

Вот мой html и css код:

Вот CSS:

Для этого вы можете использовать "@media". Вот как это будет происходить:

@media (max-width: 800px) {
    .myclass {
        font-size: 20px;
    }
}

Вы можете регулировать количество пикселей. Если вы хотите узнать больше о @media, проверьте эту ссылку: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Вернуться на верх