John, I think you need another media query in your css style sheet, you only have two, you probably need three: desktop, tablet and mobile.
Using firebug, select your wrapper div and view Layout. Drag your screen slowly to the left to find the first "breakpoint" where your styling for desktop starts to fall apart (to your liking). Jot that width value down. Continue to drag slowly to the left until you find the next breakpoint that bothers you where the tablet styling falls apart. Jot that down. Repeat to find the breakpoint where you think your mobile styling fails. Write your desktop media query with a min-width and max-width. Set your tablet the same way (but one px less than the min-width for the desktop). Repeat for the mobile. I played with your example page and came up with my own arbitrary values of 865-960 (the page background white framing disappeared), 461-864 (the menu broke) and 371-460. However adding in content really can change that. Add an image or style your menu a bit more and see where those breakpoints will be. Set image widths with percentages. The images should be managed for smaller screens, to the best of your ability, by either cropping to make a smaller file or saved for web at a smaller size. And some images might just need to be dropped for the mobile, avoid loading a large image to mobile for now if you can. The width of paragraph text can also help you decide. When you start getting paragraphs that are less than 3-4 words across it is probably time to get rid of the sidebar completely (as in mobile) and stack it below the section. That might mean making your section the full width of the mobile screen and styling it a bit differently. And of course putting in a different font can change it all too! It hasn't been as easy as it first appeared to me, each screen size really needs to be planned out and styled appropriately. But I found that utilizing some standard styling between all three screens keeps the job a bit simpler. But still, for me, it has been a bit of styling then checking breakpoints, then altering styling etc. my best patrice On 8/29/2013 6:50 PM, css-d-requ...@lists.css-discuss.org wrote:
I am trying to get solid on basic media queries with the simple site, link below. When narrow the viewport to "tablet" which I have set at max-width:768px, the desktop styles vanish, but tablet styles don't take their place. I've been wracking my brain over this and I am not seeing the problem. Any suggestions? Thank you in advance! John http://coffeeonmars.com/new/
______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
