Почему медиа-запрос переписывает стили, которые не должен переписывать?

Question

[Сергей]

Добрый день, помогите пожалуйста. Почему медиа запрос переписывает стили, которые не должен переписывать?
Суть в том, что применяется подход - mobile first и изначально все под мобилку, потом медиа-запросами под остальные брейкпоинты. Так вот, на данном скриншоте ширина экрана мобилки должна быть 20px, далее от 768px ширины - 40px, но почему-то медиа-запрос таблета перекрывает стили мобилки, даже когда ширина экрана не достигается его брейкпоинта...

&__container{
        max-width: $max-container-width;
        margin-left: auto;
        margin-right: auto;

        padding-left: $gap-container-mobile; //20px
        padding-right: $gap-container-mobile;

        @media #{$tablet-width}{ //(min-width: 768px)
            padding-left: $gap-container-tablet; //40px
            padding-right: $gap-container-tablet;
        }

        @media #{$desktop-width}{ //(min-width: 1440px)
            padding-left: $gap-container-desktop; //72px
            padding-right: $gap-container-desktop;
        }
    }

Comments

[Сергей delphinpro]

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

[Сергей delphinpro]

ну и насчет паддингов позанудствую

https://caniuse.com/mdn-css_properties_padding-inline

&__container{
    max-width: $max-container-width;
    margin-inline: auto;
    padding-inline: $gap-container-mobile; //20px

    @media #{$tablet-width}{ //(min-width: 768px)
        padding-inline: $gap-container-tablet; //40px
    }

    @media #{$desktop-width}{ //(min-width: 1440px)
        padding-inline: $gap-container-desktop; //72px
    }
}

[Сергей]

Сергей delphinpro, Странно, но ширина у меня меньше 768px, конкретно в скриншоте - 423px, но все равно перекрывает... Также спасибо за замечание про инлайны...

Answer 1

[Дмитрий Перевозкин]

Добрый день, все по селекторам у вас правильно, по порядку брейкпоинтов тоже, я проверил сейчас на примере, как у вас, все работает

Сразу уточню, вы же правильно поняли что min-width: 1440px значит что это от 1440px будет работать, по идее он должен перекрывать, по коду выглядит так, будто вы на экране менее 1440px проверяете и более 768px, но по логике у вас все окей

Comments

[Сергей]

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

[Дмитрий Перевозкин]

Супер!