0

I have a website that is fully responsive for all devices. When I am testing the responsiveness in devtools on chrome, all the breakpoints and the UI works perfectly. But when I am NOT in devtools and I am simply dragging my browser width, the breakpoints do not trigger.

This may not seem much of a big deal, but when recruiters are testing for website responsiveness, I don't think they pull up devtools to test. I think they just non-full screen the browser and drag the side of it to adjust the width for responsive testing. I am using React with SCSS and solely using media queries in SCSS files for responsiveness. No hooks.

Here are some examples of my media queries.

//
@media only screen 
and (min-device-width: 813px) 
and (max-device-width: 1080px) {
    .content-landing {
        .hider {
            h2 {
                font-size: $fsLandingText-tablet;

                .link,
                a {
                    font-size: $fsLandingText-tablet;
                }
            }
        }
    }
}

// Phone portrait
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 812px) 
and(orientation: portrait) {
    .content-landing {
        .hider {
            h2 {
                font-size: $fsLandingText-phone;
                .link,
                a {
                    font-size: $fsLandingText-phone;
                }
            }
        }

        .line {
            display: none;
        }
    }
}

Thank you for your time.

Jae
  • 82
  • 5

1 Answers1

2

Use min-width and max-width on your media queries.

According to This question, max-device-width is fixed and it doesn't matter how you resize your window. When you use devtools to emulate smaller sizes, it sends its emulated device information, therefore it's working.

Itay Ganor
  • 3,025
  • 1
  • 15
  • 34