Trouble with @media
I'm working on a responsive design and I was going by how they do it in the example on http://foodsense.is. Right now I am just testing out the full screen design and the mobile phone design for the CSS. However I cannot get my phone to respond to the same rules as the foodsense website does.
My phones screen is 1920x1080 resolution. However when I view the foodsense website it uses this query, @media only screen and (max-width: 767px). It's past the max width but is still setting the width of the body to the 320px design for phones as specified in that media query. I tried doing same thing on a design I am working on (http://sicsportsagency.com/soccer/), but have had no luck getting it to display with the 320px layout as they do.
I've been looking into this for 3 hours now and have not found a solution. Any thoughts?
My thought is: don't use @media, use media-specific style sheets instead. I find them far easier to understand!
There are a number of @media commands in the style sheet, how do you know it was that specific @media command that is being used???
Last edited by jedaisoul; 06-04-2014 at 05:54 PM.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)