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

[olorin]

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

[AlexDW]

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

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

 

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

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

 

[AlexDW]

размерная сетка в bootstrap

[olorin]

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

 

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

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

 

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

[SiteMix]

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

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

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

 

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

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

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

 

[SiteMix]

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

[olorin]

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

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

 

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

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

 

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

 

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

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

[WarStyle]

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

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

 

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

[SiteMix]

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) {...

}

[olorin]

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">