Joomla 3.x Как правильно прописать @media. для экрана 1280px и 1920px ?

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем stendapuss, 24.04.2017.

  1. Offline

    stendapuss Пользователь

    Регистрация:
    09.09.2011
    Сообщения:
    324
    Симпатии:
    4
    Пол:
    Мужской
    Как правильно прописать @media. для экрана 1280px и 1920px ? Шаблон protostar.
    Прописал @media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;}}
    Все нормально, только картинка уходит в сторону. Не вся отображается для экрана 1280px и 1920px. Уходит в сторону. Написал текст для ориентира на изображение.
    Посмотреть низ страницы:
    http://www.эвакуатор-миасс.рф/эвакуатор-карабаш
    Картинку положил для примера, там в обще нет картинок. Если положить картинку в модуле нормально работает.
    Картинка стоит по средствам Parallax.
    http://www.mmleoni.net/parallax-background-scroller-for-joomla
    Спасибо.
     
  2.  
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Картинка внизу норма. А код с ошибкой определения макс ширины.
    Код (css):
    1. @media (min-width:1280px) and (max-width:1920px){div {width: 900px !important;}}

    И место для медиа правила в файл стилей- после определения общего правила для этого блока,иначе переопределится. Хотя прописано !important, может и будет важнее всех правил.
    Хотя можно и так
    Код (css):
    1. @media (min-width:1280px) {div {width: 900px !important;}}
     
  4. Offline

    stendapuss Пользователь

    Регистрация:
    09.09.2011
    Сообщения:
    324
    Симпатии:
    4
    Пол:
    Мужской
    Прописал в самом низу еще
    Код (css):
    1. Было:
    2. @media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;}
    3. }
    4. @media (min-width:1360px) and (max-width:1366px){div {width: 900px !important;}
    5. }
    6. Добавил :
    7. @media (min-width:1280px) {div {width: 900px !important;}}


    Смотрю на Firefox Developer Edition. У меня картинка не норма.
    Адаптивный дизайн ставлю разрешение 1280-800. Ошибку не выдает. Где смотреть?
    7b1489b7f768.jpg
     
    Последнее редактирование: 25.04.2017
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Стало хуже чем было . А зачем фикс размер 900, поставь 100%, картинка растянется вместе с div
    --- добавлено: 25.04.2017, первое сообщение размещено: 25.04.2017 ---
    КАк на меня
    Код (css):
    1. @media (min-width:1280px) {div {
    2.   margin: 0 auto;
    3.   width: 900px !important;
    4. }
    5. .mmlParallaxWrap {
    6.   background-color: #eee;
    7.   left: 0;
    8.   position: relative;
    9.   width: 100%;
    10.   z-index: 1;
    11. }
    12. }

    А в html
    Код (html):
    1. <div style="background-image: url(&quot;/images/Parallax_Background/1123.jpg&quot;); background-size: contain;" class="mmlParallaxImage"></div>
     
  6. Offline

    stendapuss Пользователь

    Регистрация:
    09.09.2011
    Сообщения:
    324
    Симпатии:
    4
    Пол:
    Мужской
    Да оно так и было плохо. Хоть 100 процентов, хот 900 ставил. Картинка не хочет слушаться. Все остальное нормально, только параллакс мозг парит. Надо для него прописать. Но как не знаю.
    Вот так подсказывали
    Код (css):
    1. .mmlParallaxWrap {
    2.     background-color: #EEE;
    3.     /* left: 0; */
    4.     /* position: absolute; */
    5.     width: 100%;
    6.     z-index: 1;
    7. }
    Лучше получается, но не до конца. Все равно машина легковая не вся видна.
    --- добавлено: 25.04.2017, первое сообщение размещено: 25.04.2017 ---
    В html ошибку делаю где то. Как правильно прописать? В модуле джумлы так
    Код (html):
    1. <p>{marcoparallaxbground height="320" image="1123.jpg" caption=""}</p>

    Или в паралаксе самом надо прописать?
    --- добавлено: 25.04.2017 ---
    Код (css) прописал вся страница съехала на этом разрешение 1280.
     
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Сделай так position: relative !important;
    Блок с картинкой должен выровняться
    И еще добавь
    Код (css):
    1. @media (min-width: 1280px) {
    2.   .mmlParallaxImage {background-size:contain !important;}
    3. }
     
    Последнее редактирование: 25.04.2017
  8. Offline

    stendapuss Пользователь

    Регистрация:
    09.09.2011
    Сообщения:
    324
    Симпатии:
    4
    Пол:
    Мужской
    В css прописал
    Код (css):
    1. @media (min-width:1200px) and (max-width:1280px){div {width: 100% !important;}}
    2. @media (min-width:1360px) and (max-width:1366px){div {width: 100% !important;}}
    3. .mmlParallaxWrap {position: relative !important }}
    4. @media (min-width: 1280px) {
    5. .mmlParallaxImage {background-size:contain !important;}
    6. }

    в модуле html убрал
    Код (html):
    1. <div style="background-image: url(&quot;/images/Parallax_Background/1123.jpg&quot;); background-size: contain;" class="mmlParallaxImage"></div>

    width: 100% текст уехал. на 900 лучше было. А картинке до лампочки стоит в право, пол машины нет.
     
  9. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    так и оставь 900.Я уже подгонял под 900,чтоб по центру все было. У меня машина помещается,ну как и задано в CSS для свойства background-size: contain;
    Может кеш чистить нужно тебе. Но по вопросу темы - медиа запросы отрабатывает . С темы ухожу .
    п.с.
    Так это я ошибся,думал что это руками прописано,а это плагин добавляет .
     
    Последнее редактирование: 26.04.2017

Поделиться этой страницей

Загрузка...