Mobile/Desktop media query not working on cell phone - html

Question

Last night I worked on making my site mobile optimized. When a user is on a device with less than 684px it should show the mobile nav div and hide the sidebar div. I have tested this as working on my computer (by shrinking chrome like an accordion). I also checked https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com to see my status, but it says my site is not mobile friendly(I realize my links together is likely valid/viewport too). I will make the links more spread once I get it working overall. Thanks for any help!
Here is my code(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css):
#wrapper {
display: block;
min-width: 684px;
max-width: 1200px;
width: 98%;
margin: 0px auto; }
#media screen and (max-width: 684px) {
#wrapper {
min-width: 0px; /* show under 684px - mobile */
}
}
#content {
width: 74%;
float: right; }
#media screen and (max-width: 684px) {
#content {
width: 100%; /* show under 684px - mobile */
}
}
#mobilenav {
display: none;
margin: 15px auto;
padding: 10px 10px 10px 10px;
border-radius:20px;
border:3px solid #a1a1a1;
background:#1C2939; }
#media screen and (max-width: 684px) {
#mobilenav {
display: block; /* show under 684px - mobile */
}
}
#sidebar {
display: block;
width: 23%;
min-width: 170px;
max-width: 210px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left; }
#media screen and (max-width: 684px) {
#sidebar {
display: none; } /* hide under 684px - mobile */
}
Here is my desktop (greater than 684px view):
Here is my desktop (less than 684px view):
Here is my mobile view(Samsung Galaxy S6):

Answer 1

For responsive pages you need to add a viewport tag which tells the device how to display the content:
<meta name="viewport" content="width=device-width, initial-scale=1">
For your other question, the "request desktop site" won't work the way you have it set up. That feature is for if you have 2 separate sites(one for mobile and one for desktop). For instance the mobile site would be m.kisnardonline.com and would have different files than the desktop site.