Перейти к содержанию
olorin

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

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

Здравствуйте, форумчане. Столкнулся с проблемой медиа правила(адаптив для некоторых экранов) не работают в 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 и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.