media query is not recognized by browser or mobile device - html

Question

I'm trying to create a responsive layout, but for some reason, when I wrap the relevant CSS in a media query, it isn't recognized: i.e., if I resize my browser window or check it out on my iPhone, the CSS is not applied. I'm not sure what I'm doing wrong here. Here is the relevant code (note that I'm working with the Types plugin within WordPress, hence all the bracketed stuff):
HTML
<div class="client-stats">
<h3>Stats</h3>
<p><strong>Event Date:</strong> [types field="date-of-event" style="text" format="F j, Y"][/types] </p>
<p><strong>Event Type:</strong> [types field="event-type"][/types]</p>
<p><strong>Special Effects:</strong> [types field="special-effects"][/types]
<p><strong>Equipment Used:</strong> [types field="equipment-used"][/types]</p>
</div>
<div class="client-description">
<div class="portfolio-description">
[wpv-post-body view_template='None']
</div>
</div>
CSS
.client-stats {
width: 325px;
float: left;
margin-right: 15px;
padding: 0 7px 0 35px;
background-color: #333;
background-image: url('/wp-content/uploads/2016/05/paper-1.jpg');
min-height: 350px;
line-height: 1.5;
color: #fff;
}
.client-stats p, strong, h3 {
font-family: "Courier New",monospace;
}
.client-stats h3 {
text-transform: uppercase;
margin-bottom: 20px;
color: #fff;
}
.client-stats strong {
text-decoration: underline;
font-family: "Courier New",monospace;
}
.client-description {
margin-left: 350px;
}
#media only screen and (max-width: 768) {
.client-stats {
width: 100%;
float: none;
margin-right: 0;
}
.client-description {
width: 100%;
margin-left:0;
}
}
If I remove the media query wrap, the CSS is applied fine (so it's not the CSS rules, specifically that are the problem).
The relevant page is here, if that helps: http://107.170.41.117/client/client-6/

Answer 1

#media only screen and (max-width: 768) {
CSS lengths require units. 768 is not a valid width.
This would have been picked up if you had used a validator.