Q:

Media queries only work in responsive mode of multiple browsers

I've built my website using Bootstrap 4. There were some issues with the responsive design so I used media queries to fix those issues. The whole time I'm using Chrome's device toolbar to make the changes to the CSS. While using the device toolbar everything looks as I want it to but when I resize the browser outside of the device toolbar the media queries no longer work. I've tried this in both Chrome and Firefox. 
I've prematurely made my site live to see if the issue would still persists when live and the issue is still there. Has anyone encountered this before? 
Lakhan Production is the URL. I would greatly appreciate any feedback and insight. Thank you in advance. 

A:

In your media queries, you used min-device-width and max-device-width:  The device width  measures the device (phone, tablet etc.), not the browser window. That's the reason for what you describe. The mobile developer mode of Chrome apparently also emulates the devices that way. 
I would rather use min-width and max-width instead of min-device-width and max-device-width

