Новости Joomla

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 17 Ответов
  • 5179 Просмотров
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Как правильно прописать @media?
« : 15.04.2017, 17: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

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: Как правильно прописать @media?
« Ответ #1 : 15.04.2017, 18:15:25 »
Цитата: stendapuss от 15.04.2017, 17:41:02
прописал @media (min-width:1200px) and (max-width:1280px){div {width: 900px !important;}

Нет в конце закрывающей фигурной скобки.
Записан
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #2 : 15.04.2017, 19:24:22 »
Цитата: vipiusss от 15.04.2017, 18:15:25
Нет в конце закрывающей фигурной скобки.
Это я здесь не написал код
Код
@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

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: Как правильно прописать @media?
« Ответ #3 : 15.04.2017, 19:29:18 »
Дело тут совсем не в media. У Вас картинка с позиционированием absolute, left:0; вот она к левому краю экрана и прижимается. Задайте блоку-обертке position: relative
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #4 : 15.04.2017, 20: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, 21:57:35 от stendapuss »
Записан
*

almika

  • Захожу иногда
  • 325
  • 27 / 0
Re: Как правильно прописать @media?
« Ответ #5 : 17.04.2017, 14:04:30 »
Для выравнивая картинки по центру требуется margin: 0 auto;
Будет так:
Код
div {
	width: 900px !important;
	margin: 0 auto;
}
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #6 : 17.04.2017, 15:18:34 »
Цитата: almika от 17.04.2017, 14:04:30
Для выравнивая картинки по центру требуется 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

  • Захожу иногда
  • 325
  • 27 / 0
Re: Как правильно прописать @media?
« Ответ #7 : 17.04.2017, 15:54:07 »
Закомментируйте или уберите вот так:
Код
.mmlParallaxWrap {
	background-color: #EEE;
	/* left: 0; */
	/* position: absolute; */
	width: 100%;
	z-index: 1;
}
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #8 : 17.04.2017, 19:26:15 »
Сделал, в модуле прописал как писали. Лучше стало. Меньше уходит в сторону, но все равно уходит и изображение увеличивается. Там по ссылке шаблон повело немного. Это потом сделаю. Сейчас изображение надо сделать чтоб не менялось. Может в @media прописать надо ?
Спасибо.
Записан
*

Serg_

  • Захожу иногда
  • 168
  • 24 / 1
  • Skype: smile_bot (Запорожье)
Re: Как правильно прописать @media?
« Ответ #9 : 17.04.2017, 21:15:21 »
Возможно не изображение уходит в сторону, а просто красно-желтая кнопка "У нас самые дешёвые эвакуаторы. Звоните!" имеет свой padding и она получается шире чем 900 точек, поэтому кажется что картинка ушла влево.
Попробуйте добавить
@media (min-width:1200px) and (max-width:1280px){
 .button3 {padding:12px 0;}
}
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #10 : 17.04.2017, 21:20:06 »
Я на другом сайте пробовал.  Завтра проверю. Спасибо.
« Последнее редактирование: 18.04.2017, 11:52:25 от stendapuss »
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #11 : 18.04.2017, 19: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_

  • Захожу иногда
  • 168
  • 24 / 1
  • Skype: smile_bot (Запорожье)
Re: Как правильно прописать @media?
« Ответ #12 : 18.04.2017, 21:49:51 »
Вот как сейчас выглядит сайт на Chrome http://prntscr.com/exz3rs
Ширина изображения 900 точек.
Всё как и хотели.
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #13 : 19.04.2017, 06:26:56 »
Цитата: Serg_ от 18.04.2017, 21:49:51
Вот как сейчас выглядит сайт на Chrome http://prntscr.com/exz3rs
Ширина изображения 900 точек.
Всё как и хотели.
Ширина и работала. Машина легковая видите на разрешение 1280 уходит в сторону. Ее половину видно. Сейчас текст напишу на картинке чтоб видно было хорошо, что уходит. На вашем фото половина легковой видно. Одна рожа. Пол машины нет. Не влезла.
Записан
*

almika

  • Захожу иногда
  • 325
  • 27 / 0
Re: Как правильно прописать @media?
« Ответ #14 : 19.04.2017, 07:04:09 »
Так вы хотите?
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #15 : 19.04.2017, 07:36:47 »
Цитата: almika от 19.04.2017, 07:04:09
Так вы хотите?
Почти так, но все равно зад у легковой не влез полностью. Надо, чтоб как  на мониторе допустим 1024-768 так же и на мониторе 1280 -800. А сейчас получается на 1024 нормально а на 1280 увеличивается изображение и машину легковую зад и далее за ней не видно.
Так же открываю на 320-568 и другие. Все изображение не входит. Хотя другие изображения нормально. Только Parallax. мозг парит. Для него надо прописать, что то.
Вот так надо, у меня на 1024 так. Так же и на 1280 надо чтоб было.
https://yadi.sk/i/5zE2oOFI3H7rUd
« Последнее редактирование: 19.04.2017, 08:00:11 от stendapuss »
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #16 : 19.04.2017, 07:48:29 »
Залил другую картинку, сделал с текстом. Видно лучше, что уходит.
Переложил в низ страницы, чтоб глаза не мозолила.
Записан
*

stendapuss

  • Давно я тут
  • 945
  • 20 / 0
  • Valera Stankevich
Re: Как правильно прописать @media?
« Ответ #17 : 27.01.2018, 12:02:57 »
Сделал, Для модуля в CSS прописал 
overflow: hidden
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как правильно писать медиа запрос?

Автор web1

 Ответов: 4
Просмотров: 3000 		Последний ответ 20.09.2022, 22:01:21
от darkghost
Можно ли прописать в scss ссылку и установить картинку?

Автор vova630

 Ответов: 0
Просмотров: 925 		Последний ответ 02.01.2021, 13:56:09
от vova630
Не работает правильно сайт на хосте

Автор Алексей Лоскутов

 Ответов: 6
Просмотров: 2012 		Последний ответ 21.05.2020, 20:23:57
от xpank
@media screen - не всегда работает

Автор darkghost

 Ответов: 6
Просмотров: 9267 		Последний ответ 01.06.2017, 12:08:11
от dmitry_stas
VT media шаблон в слайдере в IE прогрессбар съезжает вниз

Автор wishlight

 Ответов: 0
Просмотров: 1455 		Последний ответ 26.04.2017, 19:26:53
от wishlight