Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

Работа с таблицами/изображениями/видео на динамических/адаптивных сайтах #2600

В данной инструкции мы расскажем, как работать с таблицами, картинками и видеороликами на адаптивных сайтах.

Шаг 1

Откройте для редактирования нужную Вам страницу с текстом (описание товара или иной раздел, предполагающий работу с текстовым редактором) и нажмите на кнопку редактирования HTML-кода на рабочей панели редактора.

  • CKEditor:

phpQyOdW3

  • TinyMCE:

phpNDgfQD

Шаг 2

В редакторе HTML вставьте в самое начало файла приведенный ниже код и нажмите "Ок" (или "Обновить" - в зависимости от установленного на Вашем сайте редактора):

<style>
img {
max-width:100%;
height:auto;
}
.videodetector {
max-width:100%;
height:auto;
}
.videodetector iframe {
max-width:100%;
}
@media all and (max-width: 725px) {
.adaptive-table td {
display: inline-block;
}
}
</style>

phpqmCEn3

Готово. Теперь все вставляемые изображения и видео будут адаптироваться под размеры экрана.

Шаг 3

Если же страница содержит таблицы, Вам также необходимо прописать в атрибутах таблицы:

class="adaptive-table"

phpZ44G3h

Альтернативное решение для таблиц

Вставьте таблицу в текст редактора, разместив курсор в нужном месте рабочей области и воспользовавшись меню "Таблицы" на рабочей панели.

Или же перейдите к редактированию уже созданной таблицы.

phpBFLCqW

В открывшемся окне Вам понадобится вкладка "Свойства таблицы".

phpcyuxWd

В поле "Ширина" укажите значение в процентах, а не в пикселах. Для этого просто в конце значения допишите символ "%".

phprbrU25

Аналогичным образом необходимо задать значение в свойствах конкретной ячейки, если это необходимо. Укажите значение в поле "Ширина", а в выпадающем списке рядом выберите пункт "процентов".

phpBYQHgy

  • Если в ту или иную ячейку вставлено большое изображение - ячейка может не сужаться под заданную ширину.