Работа с таблицами/изображениями/видео на динамических/адаптивных сайтах
В данной инструкции мы расскажем, как работать с таблицами, картинками и видеороликами на адаптивных сайтах.
Шаг 1
Откройте для редактирования нужную Вам страницу с текстом (описание товара или иной раздел, предполагающий работу с текстовым редактором) и нажмите на кнопку редактирования HTML-кода на рабочей панели редактора.
Шаг 2
В редакторе HTML вставьте в самое начало файла приведенный ниже код и нажмите "Ок" (или "Обновить" - в зависимости от установленного на Вашем сайте редактора):
<style type="text/css">@media all and (max-width: 767px) {
.adaptive-table td {
display: inline-block;
}
img {
max-width:100%;
height:auto;
}
video {
max-width:100%;
height:auto;
}
iframe {
max-width:100%;
}
}
</style>
Готово. Теперь все вставляемые изображения и видео будут адаптироваться под размеры экрана.
Шаг 3
Если же страница содержит таблицы, Вам также необходимо прописать в атрибутах таблицы:
class="adaptive-table"
Альтернативное решение для таблиц
Вставьте таблицу в текст редактора, разместив курсор в нужном месте рабочей области и воспользовавшись меню "Таблицы" на рабочей панели.
Или же перейдите к редактированию уже созданной таблицы.
В открывшемся окне Вам понадобится вкладка "Свойства таблицы" (или "Общее"):
В поле "Ширина" укажите значение в процентах, а не в пикселах. Для этого просто в конце значения допишите символ "%".
Аналогичным образом необходимо задать значение в свойствах конкретной ячейки, если это необходимо. Укажите значение в поле "Ширина", а в выпадающем списке рядом выберите пункт "процентов".
- Если в ту или иную ячейку вставлено большое изображение - ячейка может не сужаться под заданную ширину.
Дополнительно
Если у вас не получилось выполнить шаги из инструкции выше — вы можете создать Страницу на конструкторе.
Такая страница позволяет наполнять контентную область различными блоками на выбор, при этом блоки будут встроены в шапку и подвал Вашего сайта.
Подробная инструкция по созданию страницы доступна по ссылке.