Чтобы текст отображался под изображением в уменьшенном "мобильном" представлении
У меня есть сайт, который отлично работает в режиме настольного компьютера, но когда я уменьшаю страницу, шрифт остается над картинкой, из-за чего я не вижу ни картинки, ни слов. Как мне настроить html или css (или и то и другое?), чтобы шрифт опускался ниже картинки, когда сайт просматривается на маленьком устройстве?
Вот мой html и css код:
Вот CSS:
Для этого вы можете использовать "@media". Вот как это будет происходить:
@media (max-width: 800px) {
.myclass {
font-size: 20px;
}
}
Вы можете регулировать количество пикселей. Если вы хотите узнать больше о @media, проверьте эту ссылку: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp