Форум русской поддержки Joomla!® CMS
26.07.2017, 08:46:40 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Основной курс по Joomla
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как правильно прописать @media?

 (Прочитано 819 раз)
0 Пользователей и 1 Гость смотрят эту тему.
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« : 15.04.2017, 18:41:02 »

Как правильно прописать @media. для экрана 1280px ?
прописал @media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;}
Все нормально, только картинка уходит в сторону. Не вся отображается.
Посмотреть:
http://www.эвакуатор-миасс.рф/%D1%8D%D0%B2%D0%B0%D0%BA%D1%83%D0%B0%D1%82%D0%BE%D1%80-%D0%BA%D0%B0%D1%80%D0%B0%D0%B1%D0%B0%D1%88
Картинку положил для примера, там в обще нет картинок.
Картинка стоит по средствам Parallax.
http://www.mmleoni.net/parallax-background-scroller-for-joomla
Спасибо.
Записан
vipiusss
Профи
********

Репутация: +319/-10
Online Online

Пол: Мужской
Сообщений: 5753


Skype: renor_


« Ответ #1 : 15.04.2017, 19:15:25 »

прописал @media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;}

Нет в конце закрывающей фигурной скобки.
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #2 : 15.04.2017, 20:24:22 »

Нет в конце закрывающей фигурной скобки.
Это я здесь не написал код
Код:
@media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;}
}
@media (min-width:1360px) and (max-width:1366px){div {width: 900px !important;}
}
Не в этом дело, все нормально отображается, только картинка не хочет. Сползает.
Записан
Taatshi
Support Team
*****

Репутация: +451/-3
Offline Offline

Пол: Женский
Сообщений: 4987



« Ответ #3 : 15.04.2017, 20:29:18 »

Дело тут совсем не в media. У Вас картинка с позиционированием absolute, left:0; вот она к левому краю экрана и прижимается. Задайте блоку-обертке position: relative
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #4 : 15.04.2017, 21:37:11 »

Прописал:
Код:
.custom-new4 {margin: 0px 0px -410px 0px;position: relative !important;}
Не хочет по центру вставать. Уходит в право на разрешение 1280px.
Может @media margin для этого расширения прописать надо. Пробовал, только ошибка где то наверно.
Пишу
Код:
@media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;margin: 0px 0px 0px -20px}
Уходит весь модуль в сторону. А надо картинка чтоб была меньше и в лево ушла.


Надо чтоб картинка в  Parallax. сдвигалась в лево и размер картинки меньше был. А на этом разрешение 1280px изменяется размер картинки .
« Последнее редактирование: 15.04.2017, 22:57:35 от stendapuss » Записан
almika
Давно я тут
****

Репутация: +22/-0
Offline Offline

Пол: Женский
Сообщений: 267



« Ответ #5 : 17.04.2017, 15:04:30 »

Для выравнивая картинки по центру требуется margin: 0 auto;
Будет так:
Код:
div {
width: 900px !important;
margin: 0 auto;
}
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #6 : 17.04.2017, 16:18:34 »

Для выравнивая картинки по центру требуется margin: 0 auto;
Будет так:
Код:
div {
width: 900px !important;
margin: 0 auto;
}
Не работает, прописал
Код:

@media (min-width:1200px) and (max-width:1280px){div {
width: 900px !important;
margin: 0 auto;

}
}
@media (min-width:1360px) and (max-width:1366px){div {
width: 900px !important;
margin: 0 auto;
}}
Это убрал
Код:
.custom-new4 {margin: 0px 0px -410px 0px;position: relative !important;}
Надо для картинки писать, Не знаю как. Все остальные картинки нормально. Только картинка в Parallax. уезжает.
Записан
almika
Давно я тут
****

Репутация: +22/-0
Offline Offline

Пол: Женский
Сообщений: 267



« Ответ #7 : 17.04.2017, 16:54:07 »

Закомментируйте или уберите вот так:
Код:
.mmlParallaxWrap {
background-color: #EEE;
/* left: 0; */
/* position: absolute; */
width: 100%;
z-index: 1;
}
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #8 : 17.04.2017, 20:26:15 »

Сделал, в модуле прописал как писали. Лучше стало. Меньше уходит в сторону, но все равно уходит и изображение увеличивается. Там по ссылке шаблон повело немного. Это потом сделаю. Сейчас изображение надо сделать чтоб не менялось. Может в @media прописать надо ?
Спасибо.
Записан
Serg_
Осваиваюсь на форуме
***

Репутация: +24/-1
Offline Offline

Пол: Мужской
Сообщений: 175


Skype: smile_bot (Запорожье)


« Ответ #9 : 17.04.2017, 22:15:21 »

Возможно не изображение уходит в сторону, а просто красно-желтая кнопка "У нас самые дешёвые эвакуаторы. Звоните!" имеет свой padding и она получается шире чем 900 точек, поэтому кажется что картинка ушла влево.
Попробуйте добавить
@media (min-width:1200px) and (max-width:1280px){
 .button3 {padding:12px 0;}
}
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #10 : 17.04.2017, 22:20:06 »

Я на другом сайте пробовал.  Завтра проверю. Спасибо.
« Последнее редактирование: 18.04.2017, 12:52:25 от stendapuss » Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #11 : 18.04.2017, 20:24:05 »

Прописал и в модуле и в scc
Код:
.mmlParallaxWrap {
background-color: #EEE;
/* left: 0; */
/* position: absolute; */
width: 100%;
z-index: 1;
в scc добавил
Код:
@media (min-width:1200px) and (max-width:1280px){
 .button3 {padding:12px 0;}
}
Не работает, вчера в scc бала ошибка, сегодня исправил. Не работает с картинкой не в какую.
Вчера @media (min-width:1200px) and (max-width:1280px) не работало, была скобка лишняя.
Записан
Serg_
Осваиваюсь на форуме
***

Репутация: +24/-1
Offline Offline

Пол: Мужской
Сообщений: 175


Skype: smile_bot (Запорожье)


« Ответ #12 : 18.04.2017, 22:49:51 »

Вот как сейчас выглядит сайт на Chrome http://prntscr.com/exz3rs
Ширина изображения 900 точек.
Всё как и хотели.
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #13 : 19.04.2017, 07:26:56 »

Вот как сейчас выглядит сайт на Chrome http://prntscr.com/exz3rs
Ширина изображения 900 точек.
Всё как и хотели.
Ширина и работала. Машина легковая видите на разрешение 1280 уходит в сторону. Ее половину видно. Сейчас текст напишу на картинке чтоб видно было хорошо, что уходит. На вашем фото половина легковой видно. Одна рожа. Пол машины нет. Не влезла.
Записан
almika
Давно я тут
****

Репутация: +22/-0
Offline Offline

Пол: Женский
Сообщений: 267



« Ответ #14 : 19.04.2017, 08:04:09 »

Так вы хотите?


* jf-2017-04-19-01.jpg (348.43 Кб, 1135x641 - просмотрено 13 раз.)
Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #15 : 19.04.2017, 08:36:47 »

Так вы хотите?
Почти так, но все равно зад у легковой не влез полностью. Надо, чтоб как  на мониторе допустим 1024-768 так же и на мониторе 1280 -800. А сейчас получается на 1024 нормально а на 1280 увеличивается изображение и машину легковую зад и далее за ней не видно.
Так же открываю на 320-568 и другие. Все изображение не входит. Хотя другие изображения нормально. Только Parallax. мозг парит. Для него надо прописать, что то.
Вот так надо, у меня на 1024 так. Так же и на 1280 надо чтоб было.
https://yadi.sk/i/5zE2oOFI3H7rUd
« Последнее редактирование: 19.04.2017, 09:00:11 от stendapuss » Записан
stendapuss
Живу я здесь
******

Репутация: +18/-0
Offline Offline

Сообщений: 858


« Ответ #16 : 19.04.2017, 08:48:29 »

Залил другую картинку, сделал с текстом. Видно лучше, что уходит.
Переложил в низ страницы, чтоб глаза не мозолила.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet