Search code examples
cssmedia-queriesresolution

Is there a way to assign @media in CSS to one specific resolution only?

Is there a way to set CSS by @media for one specific resolution only? Not from-to px, but only for one specific number. This doesn't work:

@media (min-width: 767px) and (max-width: 767px) {
    #sp-logo {width: 33.33333333%;}
}

Neither works this:

@media (width: 767px) {
    #sp-logo {width: 33.33333333%;}
}

When I cover two or more pixels, it suddenly works. But that's not what I need. Example:

@media (min-width: 767px) and (max-width: 768px) {
    #sp-logo {width: 33.33333333%;}
}
Solution

  • Your first code snippet works fine with every other number of pixels. Its just a bug with 767px for max-width. So if you need it exactly for that number the trick is a point number (almost 768):

    @media (min-width: 767px) and (max-width: 767.9px) {
    #sp-logo {width: 33.33333333%;}
}