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

[BeItoM]

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

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

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

[sasha3337774]

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

[BeItoM]

  В 10.08.2021 в 14:28, sasha3337774 сказав:

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

Expand  

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

[DEVHUB]

  В 10.08.2021 в 14:44, BeItoM сказав:

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

Expand  

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

[BeItoM]

  В 10.08.2021 в 15:29, DEVHUB сказав:

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

Expand  

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

style.cssFetching info...

[DEVHUB]

  В 10.08.2021 в 15:33, BeItoM сказав:

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

style.css 26 \u043a\u0411 · 2 downloads

Expand  

 

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

 

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

[DEVHUB]

del

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

[BeItoM]

  В 10.08.2021 в 15:43, DEVHUB сказав:

 

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

 

Expand  

 

  В 10.08.2021 в 15:43, DEVHUB сказав:

del

Expand  

?

 

[spectre]

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

 

[DEVHUB]

  В 10.08.2021 в 16:09, BeItoM сказав:

 

?

 

Expand  

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

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

[BeItoM]

  В 10.08.2021 в 16:56, spectre сказав:

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

 

Expand  

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

[BeItoM]

  В 10.08.2021 в 16:57, DEVHUB сказав:

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

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

Expand  

не работает

 

[spectre]

  В 10.08.2021 в 17:26, BeItoM сказав:

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

Expand  

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

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

[BeItoM]

  В 10.08.2021 в 17:27, spectre сказав:

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

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

Expand  

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

[Tom]

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

[BeItoM]

  В 10.08.2021 в 18:22, Tom сказав:

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

Expand  

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

[Tom]

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

[BeItoM]

  В 10.08.2021 в 18:57, Tom сказав:

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

Expand  

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

[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. Не применяются стили после исправления данных ошибок , пробуйте это
 

 

  В 10.08.2021 в 19:52, Tom сказав:

.......

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

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

 

Expand  

 

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

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

[Blast]

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

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

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

[NazarVen]

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

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

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

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

але

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

зберігаю

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

site_copds.htmlFetching info...