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

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by stendapuss, Apr 24, 2017.

  1. Offline

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

    Joined:
    Sep 9, 2011
    Messages:
    324
    Likes Received:
    4
    Gender:
    Male
    Как правильно прописать @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 Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Картинка внизу норма. А код с ошибкой определения макс ширины.
    Код (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 Пользователь

    Joined:
    Sep 9, 2011
    Messages:
    324
    Likes Received:
    4
    Gender:
    Male
    Прописал в самом низу еще
    Код (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
     
    Last edited: Apr 25, 2017
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Стало хуже чем было . А зачем фикс размер 900, поставь 100%, картинка растянется вместе с div
    --- добавлено: Apr 25, 2017, первое сообщение размещено: Apr 25, 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 Пользователь

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

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

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Сделай так position: relative !important;
    Блок с картинкой должен выровняться
    И еще добавь
    Код (css):
    1. @media (min-width: 1280px) {
    2.   .mmlParallaxImage {background-size:contain !important;}
    3. }
     
    Last edited: Apr 25, 2017
  8. Offline

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

    Joined:
    Sep 9, 2011
    Messages:
    324
    Likes Received:
    4
    Gender:
    Male
    В 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 Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    так и оставь 900.Я уже подгонял под 900,чтоб по центру все было. У меня машина помещается,ну как и задано в CSS для свойства background-size: contain;
    Может кеш чистить нужно тебе. Но по вопросу темы - медиа запросы отрабатывает . С темы ухожу .
    п.с.
    Так это я ошибся,думал что это руками прописано,а это плагин добавляет .
     
    Last edited: Apr 26, 2017

Share This Page

Loading...