Search code examples
cssmedia-querieslwc

Can min-width and max-width be set to same value in @media?

I have a device with 1024px * 1366px for which I should adjust my lwc page to have the below padding.

@media (min-width: 1024px) and (max-width: 1024px) {
    padding-left: 160px;
    padding-right: 304px;
}

However, if I set the min-width to 1024px, it is applied to all the screen sizes above 1024px and cannot use max-width as I have different css for it. The only way I can set the padding correctly for the page is by setting the value 1024px for min-width and max-width. Is this the correct way of doing?

Solution

  • Yes it is okay to use it like you mentioned above. But you can use the exact width like this:

    @media screen and (width: 980px) { 
    
}