[Решено] Адаптивный дизайн закладки с видео

Тема в разделе "OpenCart", создана пользователем opalko, 29 сен 2016.

Статус темы:
Закрыта.
  1. opalko

    opalko

    Регистрация:
    23 дек 2014
    Сообщения:
    204
    Симпатии:
    14
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    У вас и не в мобильной версии тоже проблемы. Вот так это выглядит у меня в Firefox 49:
    [​IMG]

    Уберите в теге iframe атрибуты width и height и в стилях: файл /catalog/view/theme/univer/stylesheet/style2.css, строка 357, замените position с absolute на relative.
     
    opalko нравится это.
  3. opalko

    opalko

    Регистрация:
    23 дек 2014
    Сообщения:
    204
    Симпатии:
    14
    нашел следующее решение и адаптировал под свои классы:
    .tab-content {
    position: relative;}
    .tab-content iframe,
    .tab-content object,
    .tab-content embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    но это всё равно не решает мою проблему [​IMG]
    --- Добавлено, 29 сен 2016 ---
    убрал, теперь в обычной версии всё норм, а в мобильной всё так же криво
    --- Добавлено, 29 сен 2016 ---
    добавил:
    width: 600px;
    max-width: 100%;

    и сделал
    <iframe width="auto" height="auto" ..... вместо <iframe width="560" height="315"

    стало лучше, но футер так и остался за видео. [​IMG]
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    А это уже из-за косяка у вас в стилях. То ли шаблон кривой, то ли вы что-то перемудрили.
    Файл /catalog/view/theme/univer/stylesheet/stylesheet.css, строка 1049 и файл /catalog/view/theme/univer/stylesheet/responsive.css, строка 184 - поудаляйте там height для класса htabs.
     
    opalko нравится это.
  5. opalko

    opalko

    Регистрация:
    23 дек 2014
    Сообщения:
    204
    Симпатии:
    14
    Спасибо Dotrox, Вы решили очередную мою головоломку)
     
Статус темы:
Закрыта.