CSS - Test Your CSS Skills Number 31 - iphone

HTML & CSS
1

CSS - Test Your CSS Skills Number 31 : Quiz now ended - Solution in post#33
I know it’s going to be quiet around here on Christmas Week but I thought I’d leave you with a nice little quiz anyway to while away some time.

This quiz is very simple so all levels can have a go. (The last few quizzes have been quite difficult and in fact no one really got the last one perfectly until some clues were dropped.)

The quiz:

Imagine its Christmas Day and you’ve just unwrapped a brand new Iphone and you rush to see how your website displays on this small screen device.

You may be dismayed to find that a 1200px wide layout doesn’t look so good on a 320px width screen.

Therefore your mission (should you accept) is to take a 3 column layout that stretches to full screen on large monitors but when you view it in portrait mode on your iphone there is no horizontal scrolling.

If you didn’t get an iphone for Christmas then don’t worry because I don’t have one either :(. The challenge is basically to take 3 column layout and make it display vertically when the screen is reduced to 320px wide and the content is aligned nicely in one column without the need to scroll sideways.

To clarify further this is basically a test to make 3 columns display vertically as per the screenshots but just in a normal Safari browser (forget about the iphone itself for the quiz).

Rules:
In case you are thinking that this is too easy then of course there are a couple of rules as usual.

The main rule is that the left and right columns are a fixed width of 316px (approx) and that the centre column must stretch to fill the available space but never be smaller than 316px wide (approx).

As always pictures are worth a 1000 words so look at the three attachments which show a 3 column layout at full width, half width and lastly at 320px width.

You can use your own html and css but it must be valid and must work in Safari of course (and should also work in IE7 - 8, Firefox 3+ and Opera 10 but don’t worry about IE6.)

The same CSS should work for all screen widths so no device dependent media styles to be used.

No scripting to be used either. It’s just valid css and html.

As usual with these quizzes don’t give the answer away in this thread but PM the answer once you have thoroughly checked your code.

If you think you have a solution then PM it to me as I don’t believe anyone who says they can do it but doesn’t provide proof :slight_smile:

However don’t give anything away in this thread although you can ask questions if you are not sure of the rules or what is required.

Remember this is just for fun and there are no prizes.

Edit:

For those of you who find this task quite easy you may want to try and copy the screenshots I posted and keep the left middle and right columns in the same order as shown (header,left,middle,right,footer) when the screen is squeezed and also to have the html source order the same (i.e. header followed by left followed by middle followed by right and followed by footer - although you can add an extra wrapping element if needed.)

Have fun and have a good Christmas.:slight_smile:

PS. : In case you missed the other tests you can find them all listed here:

2

Fun quiz :). Have fun with it everyone and Merry Christmas :).

3

i don’t have any iphone either,
all i have is a small phone, and all its able to do is to call people and be called, nothing else really.
I will probably never get one, and i will probably never get this either:
http://www.youtube.com/watch?v=QwnsQpcNvpE&feature=related

anyway, im taking part. :slight_smile:

4

I have a solution for Gary Turner already so well done Gary and thanks for taking part.:slight_smile:

Edit:

Just noticed that Safari isn’t dropping the column so it needs a fix :wink:

For those of you who find this task quite easy you may want to try and copy the screenshots I posted and keep the left middle and right columns in the same order as shown when the screen is squeezed and also to have the html source order of left followed by middle followed by right (although you can add an extra wrapping element if needed.)

5

I don’t have an iPhone either, but having played with those of friends, I’ve learned that Safari on the iPhone doesn’t seem to behave like Safari on the desktop. I designed a site that allowed columns to drop beneath each other if a desktop browser was narrowed to around 320px, but on the iPhone, the columns just scaled down proportionately and never dropped. Does the quiz account for this? I’m not sure we can test our layouts for this quiz simply by narrowing desktop Safari to 320px…

6

Paul, I’m a bit confused by your half-width screenshot. The green middle div does not seem to be full width. Have I missed something in the instructions? I would have expected it to fill the available space to the right, according to the instructions.

7

Does the quiz account for this? I’m not sure we can test our layouts for this quiz simply by narrowing desktop Safari to 320px…

No the quiz is basically just for normal browsers as I don’t have an iphone either so I can’t test (unless you want to buy me one for Christmas :)) .

It’s just an exercise in making three columns align vertical at about 320px.

The green middle div does not seem to be full width.

It’s full width on windows greater than 960px but on 800px each block will be 320px wide and therefore the green cant expand to the edge. That’s why I gave the screenshots to show what happens.

Of course you can make variations if you want as long as they are interesting :slight_smile:

I also added a second part to the quiz so that source order and the order in which the columns drop is the same as the image etc.

8

I have an entry from Kravvitz that works in all but Safari but is very close :slight_smile:

I also notice that Gary’s version above suffers from a similar problem in Safari so I am still waiting for the definitive answer :slight_smile:

9

Hi Ralph,

I just did some tests on my sons iphone and you would need to set the meta tag and device stylesheet as follows.



<meta name="viewport" content="width = 320" />
<style type="text/css">
@media only screen and (max-device-width: 480px) {
  body {
    width:320px
  }
}
</style>

That will stop the full screen browsing and the columns will stack vertically in the full width of the iphone.

10

Sound’s intresting! I’m going to try this quiz out. I have the Google Phone, so i’ll be able to test my code out before I show you my example.

Merry Christmas Everyone! :slight_smile:

11

Wow, that’s amazing. Thanks Paul. How did you work that out? Is there anything you can’t do?! :lol:

12

Wow, that’s amazing. Thanks Paul. How did you work that out? Is there anything you can’t do?!

A List Apart mentions that the iPhone’s Safari (along with Opera Mini and Mobile) is one of the few phone browsers who actually bother with the @media queries, and the ability to set a width is mostly for those “full web” browsers who don’t fully accept the handheld.css because they can do zoomz.

13

How are we getting on with this ?

Anyone struggling?

Do you want clues yet?

Or have we all gone for Christmas early.:slight_smile:

14

I still can’t figure out how to get all 3 columns to sit next to each other when there’s enough room, but still drop below each other when there isn’t. One column or another refuses to drop in Safari.

It seems to be the negative margins that prevent it from working right in Safari, but I don’t see an alternative.

15

This isn’t much of a clue but here’s the html from my version :slight_smile:

<div id=“outer”>
<div class=“header”><h1>Header</h1></div>
<div class=“col1”>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
<p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 </p>
</div>
<div class=“col2”>
<div class=“inner”>
<p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
</div>
</div>
<div class=“col3”>
<p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :</p>
</div>
<div class=“footer”>
<p>This is the footer This is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footer </p>
</div>
</div>

It may jog you in the right direction :slight_smile:

16

well in therms of HTML I’m already at that point, so no help there.
but i only manage to replicate one of the images at a time, but not all of them together.

still thinking though.

17

not thinking anymore.
can’t believe it took me more than 2 hours to solve something that i had already solved.
xD

18

I have the first all correct solution (that is working in Safari) from Timo (Yurikolovsky).

Well done Timo and thanks for taking the time to have a go :slight_smile:

Any more takers yet ?

19

Depressed and losing sleep over it. :lol: Will have a look at your code, though.

Grrrrr.

20

i will test it,and merry christmas