So after a horrible attempt last week, which was fixed I realized that I have forgotten most of what I know of CSS, and last time I made a full production website by myself, the iPhone was barely a thing. So I'm doing a bunch of exercises in responsive layout, and I'm a little confused by one in particular, and it is one I made a pretty big mistake on last week and which deathshadow was nice enough to rewrite. However, I don't think for a second this is impossible - I just think I've forgotten how to do it. So we'll take the HTML. <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> HTML: On a full screen or decent sized tablet, I'd want that to display in 2 columns, on a phone or low res screen, that'd be one column. Seems simple to do, I can't think of how to do it. In graphical terms: I'll be honest, when I'm mobile browsing, I prefer fix-width and zoom on most sites or a site designed specifically for the device I'm using (though these often take out important functions). It just confuses me because I can't specify a width and I can't come up with anything using min/max width that'd help either. So if you now how to do it in pure CSS, I'd like to know. Or even ideas and hints. Thanks
Yer not using enough DIV -- also if those are supposed to be fixed or equal height, /FAIL/ hard in CONCEPT... but without seeing what would actually go in those boxes it's hard to say what the proper markup should be... Taking a wild guess: <div id="pageWrapper"> <div class="firstHalf"> <div class="box"></div> <div class="box"></div> <!-- .firstHalf --></div> <div class="secondHalf"> <div class="box"></div> <div class="box"></div> <!-- .secondHalf --></div> <!-- #pageWrapper --></div> Code (markup): body { text-align:center; /* center #pageWrapper IE 5.x */ } #pageWrapper { /* so paragraphs don't end up too long on really big displays */ max-width:68em; /* so non media query browsers don't get too small / broken */ min-width:40em; /* show some body border at the sides on large screen */ width:90%; /* center it */ margin:0 auto; } * html #pageWrapper { /* IE6 and lower don't know min/max width, give them crappy fixed width, OH WELL! I don't bother trying to fake it with expressions anymore. */ width:40em; } .firstHalf, .secondHalf { float:left; width:50%; } .secondHalf { /* prevent IE perfect width float drop */ margin-right:-2em; } @media (max-width:40em) { #pageWrapper { /* smallest supported display size when queries work */ min-width:192px; /* switch to using as much display as possible */ width:auto; } .firstHalf, .secondHalf { float:none; width:auto; margin:0; } } Code (markup): Mind you that's the order: 13 24 If you want them in the order: 12 34 I highly advise against that since again, that would only work 'properly' if they are fixed heights, something you should NEVER be doing on content in the first place. You REALLY want that you'd have to float all the .box as 50%, margin-left even boxes and clear:both odd boxes, and you can't declare borders or padding on those DIV. That's why things like 'equal height boxes multiple across' are "Not viable for web deployment" and fall squarely under "But I can do it in Photoshop" idiocy. Building responsive just further illustrates that a LOT of the things people do in their 'designs' have ZERO MALFING BUSINESS on a website if you give a flying purple fish about accessibility or, well, coding elastic, semi fluid and responsive... and a truly accessible "design" should have all three! The mere notion of most of those layout concepts being broken thinking because as always people seem to want to start with what it looks like, instead of having a logical document structure with semantic markup before even THINKING about layout... much less building/designing the layout from that semantic markup/content instead of dicking around drawing uselessly stupid idiotic pictures in Photoshop. Really though I would probably NOT use the above markup or code since it doesn't really say WHAT those boxes ARE -- and that's markup without content. Without knowing what's going into the layout for CONTENT one has little business writing markup except to show how/where the CSS would be applied in theory.
Thank you. The design is purely theoretical, and the content would just be a bunch of paragraphs. I'd very much like fluid height on the objects. On my widescreen display, I'd much rather have the "boxes" take up most screen realestate so I can eschew vertical scrolling if it isn't necessary. Though I guess "box" is the wrong way to look at it, semantically that would be "subheading". So two columns of content with several subheadings. Could be a flaw in my logic the way I explained it. So two columns, that collapse into a single one. Which I think is what you've done with this code. Going through your code, there are a few things I don't understand. First, @media. I've never used media queries before so my understanding is flawed, but when you list: @media (max-width:40em) Code (markup): So if the screen is less than 40em wide? 40em of what? Is that querying #pageWrapper or the whole page? Actually that's about it I don't understand I think, time to play with some code. Thanking you.
It's basically the viewport that's the target -- the area inside the browser window in which a page is rendered; basically not counting scrollbars or borders, etc. If the viewport is narrower than 40EM, the rules inside it are applied. Gets narrower than we want, strip off the columnar code. I also change the min-width since as the comments say, the larger min-width stated outside the query is for non-query browsers (IE 7 and 8). Media queries can be ridiculously powerful -- they're one of the best features of CSS3 and finally give us a proper way to build for mobile instead of the uselessly pointless WAP and it's kine. Have a good look at the CSS for this one: http://www.cutcodedown.com/for_others/rolodex/movies/ Or for something far more complex, I just did this for someone on another forums which is REALLY ice-skating uphill -- but shows some heavy-duty media query action on modern browsers (with script assist for older ones) in addition to scripted height auto-adjust. http://www.cutcodedown.com/for_others/jimiwa/ Making the width auto-adjust to multiples of 80 so the top image is always the exactly lined-up number of elements isn't too bad in media queries, and it runs faster than the scripting. @media (min-width:748px) { #borderWrapper { width:732px; } } @media (min-width:828px) { #borderWrapper { width:812px; } } @media (min-width:908px) { #borderWrapper { width:892px; } } @media (min-width:988px) { #borderWrapper { width:972px; } } @media (min-width:1068px) { #borderWrapper { width:1052px; } } @media (min-width:1148px) { #borderWrapper { width:1132px; } } @media (min-width:1228px) { #borderWrapper { width:1212px; } } @media (min-width:1308px) { #borderWrapper { width:1292px; } } @media (min-width:1388px) { #borderWrapper { width:1372px; } } Code (markup): ... and of course stripping all that off when the screen is too narrow. NOT that I'd use that mess on a production website if it could be avoided; but there's what we have for common sense, and then there are clients.
That border one is a concept which is why I just don't buy that things can't be done in CSS, though I'll admit I've been baffled by the simplest stuff lately. That said, the one you've provided me doesn't actually work in iPhone (Safari or Chrome). It keeps the 4 boxes in columns (not horizontal scrolling, it crams them all in. I have to set the query to a max-width of 65em. I'm assuming this has something to do with font size across devices?. If I zoom in to 200% on Opera on Linux, then it behaves as expected .
That's probably their trying to FORCE the page to 'behave' breaking a behaving page -- no joke. They try so hard to make desktop layouts work 'as is' they break mobile layouts. To the markup, you need this inside HEAD: <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> Code (markup): Which tells the mobile browsers NOT to auto-zoom, and not to lie about how wide they are... or at least, not lie as much. Normally they'll lie and say they're either 800 or 1024 wide regardless of their real resolution; That line makes them not lie, or in the case of Apple retina displays, they lie by claiming to be half the resolution they really are. (that's a long story) Fonts will still be a bit disobedient, so you also need this in the CSS: * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } Code (markup): Telling mobile browsers to use the normal browser default size, instead of their 'auto-scaling' overrides that are also there to try and make deskop work on mobile. You only need this on older android and/or iPod / iPhone 4's and earlier, as well as some windows mobile devices. It has to go in a media query or it will break desktop Safari preventing zoom from working. (herpaderp). Anything larger like tablets don't need this. Sorry there, forgot those completely. Those should make the iPhone sit up and listen.
Ahh yea, I was playing around with viewport meta yesterday, I should've picked that up. Yay, browser prefixes! I would not have picked up the -text-size-adjust. I'm on a 4S, so I'm horribly out of date by Apple standards - let alone the iPad 2. Cannot test in desktop Safari since well...Linux. Only just found out they discontinued it for Windows. Hahahahaha yea, I get that long story. Thanks again