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.