Не работают css медиа-запросы

[BeItoM]

У меня есть обычная верстка и на ней работают медиа-запросы, но потом я верстку натянул на opencart и там медиа-запросы не работают.

Пример медиа-запроса:

@media (max-width:1024px){
    header .menu {
        display: none;
    }
}

[sasha3337774]

может кэш? медиа-запросы не работают или любые стили не подтягивает?

[BeItoM]

14 минут назад, sasha3337774 сказал:

может кэш? медиа-запросы не работают или любые стили не подтягивает?

Точно не в кеше проблема, стили отлично работают, только с медиа-запросами проблема

[DEVHUB]

45 минут назад, BeItoM сказал:

Точно не в кеше проблема, стили отлично работают, только с медиа-запросами проблема

Покажите файл стилей и ссылку на сайт 

[BeItoM]

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

Покажите файл стилей и ссылку на сайт 

http://shop.cb33457.tmweb.ru/

style.css

[DEVHUB]

10 минут назад, BeItoM сказал:

http://shop.cb33457.tmweb.ru/

style.css 26 \u043a\u0411 · 2 downloads

 

@media (max-width:1024px){
        .menu {
		display:none;
	}
}

 

Змінено 10 серпня 2021 користувачем DEVHUB

[DEVHUB]

del

Змінено 10 серпня 2021 користувачем DEVHUB

[BeItoM]

25 минут назад, DEVHUB сказал:

 

@media (max-width:1024px){
        .menu {
		display:none;
	}
}

 

 

25 минут назад, DEVHUB сказал:

del

?

 

[spectre]

а в чем проблема загнать это в любой валидатор и увидеть ошибку?

 

[DEVHUB]

48 минут назад, BeItoM сказал:

 

?

 

@media (max-width:1024px){
        .menu {
		display:none;
	}
}

Вот так должно заработать говорю

[BeItoM]

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

а в чем проблема загнать это в любой валидатор и увидеть ошибку?

 

Спс, но это не решило проблему с медиа-запросами

[BeItoM]

29 минут назад, DEVHUB сказал:

@media (max-width:1024px){
        .menu {
		display:none;
	}
}

Вот так должно заработать говорю

не работает

 

[spectre]

1 минуту назад, BeItoM сказал:

Спс, но это не решило проблему с медиа-запросами

так ищите дальше 

парсер туда не доходит просто 

[BeItoM]

9 минут назад, spectre сказал:

так ищите дальше 

парсер туда не доходит просто 

Исправил ошибки, которые показал валидатор -  не помогло. В devtools не видно медиа-запроса.

[Tom]

<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/barbershop/style.css?ts=<?=time()?>" />

[BeItoM]

32 минуты назад, Tom сказал:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/barbershop/style.css?ts=<?=time()?>" />

С подключением стилей всё хорошо

[Tom]

Уверены или кажется? Что там со значением времени ? Оно так в твиге работает или не глядя влепили?

[BeItoM]

23 минуты назад, Tom сказал:

Уверены или кажется? Что там со значением времени ? Оно так в твиге работает или не глядя влепили?

Ок, убрал его, ничего не изменилось

[Tom]

На строке 1229 лишняя кавычка.

Плюс в случае с меню видимо применить импортант.

@media (max-width:1024px){
    .menu {
        display: none !Important;
    }
}

 

[BeItoM]

Не помогло(

[Tom]

А так обычно и бывает, когда тебе пишут одно, а делаешь ты принципиально другое.

[BeItoM]

Пожалуйста объясни по шагах что нужно сделать

[Tom]

1. Исправить ошибки в стилях. Масса он-лайн сервисов для этого. Как вариант http://csslint.net/

2. Что то начинаете внедрять, не забивайте на полное выполнение задачи, пока она не будет решена :
 

   style.css?ts=<?=time()?>

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

Как вариант добавить так (единственное не понятно зачем там у вас такая вложенность и явно лишняя папка /mycustomtheme/ )

<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/barbershop/style.css??{{ object.date|date('H.i.s') }}" />

3. Не применяются стили после исправления данных ошибок , пробуйте это
 

 

13 часов назад, Tom сказал:

.......

Плюс в случае с меню видимо применить импортант.

@media (max-width:1024px){
    .menu {
        display: none !Important;
    }
}

 

 

Теперь отвлечённая тема... Зачем кому то в 2021 году сайт, без мобильной версии ?

Почему при наличии 100500 проблем и неистово красной консоли браузера кричащей об ошибках и предупреждениях, всё что вас беспокоит, это зачем то свернуть шею вёрстке , скрывая от покупателей возможность перемещаться по меню навигации в и так убогой мобильной версии?

[Blast]

@media (max-width:1024px){
    header .logo_menu .menu {
        display: none;
    }
} 

сейчас стиль имеется в коде, но его приоритета недостаточно просто чтобы перекрыть другой стиль, где указано display: block

нужно просто изменить селектор согласно правилам приоритета стилей

[NazarVen]

у мене подібна проблема, якщо хтось знає - підкажіть будь ласка:

Не працює верстка (моб версія) опенкарт 3

Створив в редакторі сторінку html css

в бравзері мобільна версія працює - тобто блоки підлаштовуються під екран

але

коли завантажую в Блог (або картегорія чи товар)  в редакторі опису, ось тут :

зберігаю

- на сайті моб верстка не працює

site_copds.html