Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Не работают @media правила в Chrome и Opera


olorin
 Поделиться

Рекомендованные сообщения

Здравствуйте, форумчане. Столкнулся с проблемой медиа правила(адаптив для некоторых экранов) не работают в Chrome и Opera. Но при этом в Firefox проблем с ними нет. Кеш браузеров отчистил -  не помогло. Прошу вашей помощи, может кто сталкивался с таким? Вот сайт. Заранее спасибо)

Ссылка на комментарий
Поделиться на других сайтах


3 минуты назад, olorin сказал:

Но при этом в Firefox проблем с ними нет.

 

не хочется расстраивать, но в ff у вас тоже далеко не гладко

Скрытый текст

84e08c7fe58a47cc8dea7aa829364f28.png

 

Ссылка на комментарий
Поделиться на других сайтах

28 минут назад, AlexDW сказал:

 

не хочется расстраивать, но в ff у вас тоже далеко не гладко

  Показать контент

84e08c7fe58a47cc8dea7aa829364f28.png

 

То что не гладко, то понятно). я Изменял сайт(шапку и подвал) и после этого адаптив не переделывал. Только я так и не понял в чем проблема?

Ссылка на комментарий
Поделиться на других сайтах


16 минут назад, olorin сказал:

Только я так и не понял в чем проблема?

Если говорить о скриншоте, то в среднем блоке напихано больше, чем может уместиться на разрешениях меньше 1200рх. Да и на нём email налезает на конверт.

 

А, собственно, о каких разрешениях был вопрос?:

55 минут назад, olorin сказал:

медиа правила(адаптив для некоторых экранов) не работают в Chrome и Opera.

 

Ссылка на комментарий
Поделиться на других сайтах


2 часа назад, SiteMix сказал:

Кстати, в курсе, что на странице "Оплата и доставка" ахтунг висит?

 

3 часа назад, SiteMix сказал:

Если говорить о скриншоте, то в среднем блоке напихано больше, чем может уместиться на разрешениях меньше 1200рх. Да и на нём email налезает на конверт.

 

А, собственно, о каких разрешениях был вопрос?:

 

я же говорю, адаптив переделывать/доделывать нужно. Разрешения? К примеру 320px. На скрине видно как при ширине 320 выглядит мобильная версия(тоже правитьнужно, т.к. поехала вёрстка, но суть видна)

По поводу "ахтунга" знаю. Но пока еще не шарю как решить. Это не только на "оплате и доставке" а почти на всех страницах навигации по сайту. Спрашивал в другой теме, так и не узнал. 

Screenshot_36.png

Ссылка на комментарий
Поделиться на других сайтах


3 минуты назад, olorin сказал:

я же говорю, адаптив переделывать/доделывать нужно.

 

Не проще и дешевле поставить шаблон нормальный?

Ссылка на комментарий
Поделиться на других сайтах

1 час назад, olorin сказал:
5 часов назад, olorin сказал:

Столкнулся с проблемой медиа правила(адаптив для некоторых экранов) не работают в Chrome и Opera

Разрешения? К примеру 320px. На скрине видно как при ширине 320 выглядит мобильная версия(тоже правитьнужно, т.к. поехала вёрстка, но суть видна)

Всё не изучал, но это попалось на глаза: @screen and (max-width: 425px)

/catalog/view/theme/default/stylesheet/stylesheet2.css  - строка 424

 

Тут сразу две ошибки:

1. медиа-запросы должны начинаться с @media и только потом условия.

2. не надо использовать screen для мобильных разрешений, поскольку на смартфонах они не сработают, ведь screen - это экран монитора.

В общем, переделай все подобные запросы для мобильных экранов по такому принципу:

@media (max-width: 425px) {...

}

Для "мониторных" разрешенийи можно сделать и так:

@media screen (max-width: 991px) {...

}

но можно и универсальное:

@media (max-width: 991px) {...

}

Ссылка на комментарий
Поделиться на других сайтах


3 часа назад, SiteMix сказал:

Всё не изучал, но это попалось на глаза: @screen and (max-width: 425px)

/catalog/view/theme/default/stylesheet/stylesheet2.css  - строка 424

 

Тут сразу две ошибки:

1. медиа-запросы должны начинаться с @media и только потом условия.

2. не надо использовать screen для мобильных разрешений, поскольку на смартфонах они не сработают, ведь screen - это экран монитора.

В общем, переделай все подобные запросы для мобильных экранов по такому принципу:

@media (max-width: 425px) {...

}

Для "мониторных" разрешенийи можно сделать и так:

@media screen (max-width: 991px) {...

}

но можно и универсальное:

@media (max-width: 991px) {...

}

Спасибо за советы и найденные ошибки. Исправлю и приму к сведению. И я разобрался в чем была проблема не работающих медиа оказалось всё до смешного просто) :
в метатегах был прописан такой вариант:
 

<meta name="viewport" content="width=1024">

заменил его на этот:
 

<meta name="viewport" content="width=device-width,initial-scale=1">

 

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.