Почему мое поле(слева/справа) не изменяется, когда экран становится меньше?

#html #css #media-queries

Вопрос:

Я знаю, что есть проблема, связанная с экраном @media, но, к сожалению, это не сработало для меня.
Поэтому мой стиль.css выглядит так

     .left-align-item {
        margin-left: 20%;
        margin-bottom: 80px;
        text-align: left; 
    }
    #logo {
        margin-top: -65px;
        float: left;
        margin-left: 20%; 
    } 
    ul {
        float: right;
        margin-top: 24px;
        margin-right: 20%; 
    }

И мой отзывчивый.css

 @media screen and(max-width: 1360px) {
    /*GENERAL*/
    .left-align-item {
        margin-left: 10%;
    }
    /*HEADER*/
    #logo {
        margin-left: 10%;
    }
    ul {
        margin-right: 10%;
    }
}

И голова:

 <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon.ico">
    <link rel="stylesheet" href="assets/css/fa/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/fa/css/brands.css">
    <link rel="stylesheet" href="assets/css/fa/css/solid.css">
</head>

Если мой экран меньше 1360 пикселей, размер левого поля не изменяется с 20% до 10%. Я не могу найти здесь проблему.

1. Вы должны создать фрагмент, чтобы мы могли взглянуть на то, что происходит на самом деле.

2. Пожалуйста, укажите код, в который вы включаете файлы?

3. @MisterJojo Да, похоже, что css для определенного класса/тега не перезаписывается медиа-запросом при изменении размера экрана.

4. @ShreyanshKashyap Я не могу, так как stackoverflow говорит, что у меня есть только код, даже когда я делаю фрагменты

5. @MisterJojo Нет, между ними не хватало места and(max-width)

Ответ №1:

Из документации:

Между not ключевым словом , and , или or и следующим ( символом требуется пробел. Без этого анализатор анализирует его как токен другого типа. Подробные сведения

В вашем медиа-запросе должен быть пробел между and скобками и ( :

 
@media screen and (max-width: 1360px) {
    /*GENERAL*/
    .left-align-item {
        margin-left: 10%;
    }
    /*HEADER*/
    #logo {
        margin-left: 10%;
    }
    ul {
        margin-right: 10%;
    }
}

Ответ №2:

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

Ответ №3:

Это может быть проблемой специфики. Проверьте порядок ссылок на стили, убедитесь, что responsive.css объявлен после style.css

Также проверьте синтаксис вашего медиа-запроса: в нем должен быть пробел между и