Хочу переделать главную страницу сайта. Сейчас вверху изображение, под ним таблица, ширина которой должна быть равна ширине этого изображения. Выставлять ширину таблицы в % дело абсолютно бессмысленное, т.к. на разных мониторах она будет разной ширины. Выставила ширину в пикселях, и тоже фигня получается. На небольшом мониторе верхнее изображение уменьшается и полностью влезает в экран. А правый край таблицы вылезает за пределы экрана. Слышала, что можно то же самое сверстать блоками, и тогда на маленьких экранах блоки будут выстраиваться друг под другом. В последний раз я верстала лет 10 назад, и про блочную верстку знаю только то, что она есть. Кто-нибудь может показать пример такой верстки, чтобы можно было сделать по аналогии? Свидетельства моего позора прикладываю.
1 ответ
Для того, чтобы сайт корректно отображался на экранах разных размеров после определения разметки указанным в комментарии способом можно использовать медиа-запросы:
@media (max-width: ...px){
CSS-стили
...
}
grid css
и проflexbox
, они решают данную задачу. Тут на сайте есть подобные решения, поищи по данным запросам