If you want us to help you, you must place us on the same footing as you. The best way to do that is to supply a link to your site.
Yes, links would help! I keep thinking it was a cache or naming issue on my end. But have cleared the history, numerous times.
http://www.accu-print.org/okrentgolf (hosted url)
I've attempted recreating the virtual directory and site many times using the www.okrentgolf.com and www.accu-print.org/okrentgolf/index.html variations, also tried, changing the meta tag info for mobile. The desktop version of firefox applies the style on resizing the window. Tested on iphone and android. Also <Title> shows up different depending on which link I click above, however, view source and they are the same title/same page?
ps. the site was based on David Powers Tutorial "HTML5 and CSS3 in Dreamweaver CS5.5"
The media queries do work, perhaps not where you want them to work.
The first change occurs at window width 782px and viewport width 768px;
The second change does not happen because the viewport width does not go below 355px although at this point the window width will go to below 369px.
Try upping the phone max-width to 360px and see it all happen.
On a phone, the page still goes to a min width of 327px which is more than the 320px that you have nominated for the style sheet to kick in.
Thank you again for taking time to look at this. I failed to mention I had adjusted the media query to 360px. Although, both urls above call up the same web page it seems the first url is wrapping the source into a frame.
Source code from Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<frame frameborder="0" noresize />
<!-- pageok -->
<!-- 02 -->