CODEWITHSUNDEEP
csssassmedia-queries
Matthew Johnston
Matthew Johnston

Reputation: 25

Media query issue only exactly at 978px

I'll describe the issue first then show how my media queries are setup.

The issue is that at exactly 978px wide, media queries are being ignored.

Here's what my site looks like at 977px wide
And here's at 978px wide

The background image disappears. The background image is being set with media queries so that it can load smaller images on smaller devices.

Here's the code (SCSS):

//Desktop
@include desktop {
    background: $header-desktop-img;
}

//Tablet
@include tablet {
    background: $header-tablet-img;
}

And here are the media queries being used for desktop and tablet:

$break-desktop: 978px;    

//Desktop
@mixin desktop {
    @media (min-width: #{$break-desktop + 1}) {
       @content;
    }
}

//Tablet
@mixin tablet {
     @media ((max-width: #{$break-desktop}) {
          @content;
     }
}

As far as I understand, media queries are inclusive, so there shouldn't be a gap in the media queries, but for some reason there is.

If anyone has an idea how to fix this issue, please let me know.

Upvotes: 0

Views: 210

Answers (1)

Ben Viau
Ben Viau

Reputation: 106

If your browser is zoomed (as in 90%, 110%), this can cause rounding issues in certain cases which may be what you are experiencing. However, even if this is not the case, I would generally advise against using both min and max-width queries, and to instead go with a mobile-first approach. That is, to begin by writing the base styles to apply for the smallest possible screen, and then write only min-width queries that overwrite the previous breakpoints. In this approach, you are guaranteed not to have any gaps in your queries. For instance,

.some-selector {
    width: 100%;

    @media screen and (min-width: 768px) {
        text-align: center;
    }

    @media screen and (min-width: 992px) {
        width: 50%;
        text-align: left;
    }
}

Upvotes: 1

Related Questions