Max width for media query not working even with meta tag-CodePudding

I'm stuck with this issue that ocured to me, My media query was working well as it should be, but then in a moment it just stopped working, and I published a question about this issue but it endedup that the max-width of media query is not workin and if I set min-width it works.

Here is my code:

@media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
    display: block !important;
}
.contInputs,
.contInputs3 {
    flex: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px;
    width: 100%;
}
.last {
    margin-bottom: 60px;
}
.contenido {
    display: flex !important;
    flex-wrap: wrap !important;
}
.contenedoresGen {
    max-width: 100% !important;
    width: 100% !important;
}
 ::ng-deep .mat-horizontal-content-container {
    padding: 0 !important;
}
 ::ng-deep.mat-horizontal-stepper-content {
    overflow: auto !important;
}
 ::ng-deep .mat-tab-label-container {
    overflow-x: auto !important;
}

}

And also I do have the meta tag on the index header, I'm working with angular

    <meta name="viewport" content="width=device-width, initial-scale=1">

CodePudding user response：

When a media query has two rules with the and joining them both rules, it means for the media query to pass, both rules need to be satisfied.

In the rules stated, you want a media query to be applied when the screen's maximum width and the device's maximum width are the same, i.e., the screen should be less than or equal to 760px and the device you are viewing on should be less than or equal to 760px in size.

This is a constraint that can only happen if you are using a device that is below the 760px mark. As such, you cannot see the media query change on your laptop unless you simulate it in your dev tool Check this simulated image for more information

The reason the min-width and/or min-device-width work is because you have asked your query to check and fulfill a rule when your screen or device is greater than or equal to 760px. i.e

@media only screen and (min-width: 760px) and (max-device-width: 760px){} will work if your device screen width is greater than or equals 760px and your device width is less than or equals 760px.
@media only screen and (max-width: 760px) and (min-device-width: 760px){} will work if your device screen width is less than or equals 760px and the device width is greater than or equals 760px

As a result, I will implore you to check the conditions in your media query and adjust based on the device.

I hope this helps