adit-coco-garg / sandbox Goto Github PK

THIS IS A COPY OF THE ISSUE: sass-mq/sass-mq#124

I tested out the mq library and for some reason it seems to be producing incorrect mqs.
It was unable to calculate breakpoints in ems for smaller sized screens. I tested this on a iphone x and also on virtual devices in google dev tools.

style.scss

@include mq($from: desktop) {
    body{
        background-color:$background1;
        font-family:$fontFam;
}

When the scss was compiled, it resulted in the following scss:

style.css

@media (min-width: 61.25em) {
  body {
    background-color: orange;
    font-family: "Open Sans", sans-serif;
  }
}

I was trying to display orange as the background for screen sizes greater and equal to the desktop size.

Below is a link to a screenshot illustrating the effect.
https://user-images.githubusercontent.com/23007265/62267171-e494f100-b3f0-11e9-8b5d-999546457dbf.png

RESOLUTION

@ kaelig:

Thank you! Have you tried adding a viewport meta to the head of your document?

<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, please don't edit breakpoints in the library itself (the documentation explains how to override the mq-breakpoints map the right way).

Closing this, feel free to reopen if this still doesn't work.