This was the responsive web design for the CurryOut.

There are billions of possible answers. What follows sketches out a 
simple solution that is capable of scoring full marks. Note that the 
best solution, as explained in the lecture, is *not* one where you 
do a 4-column layout and then use media queries to turn it into a 
3-column, 2-column and 1-column layout. Rather, the best solution 
starts with  a 1-column layout and then uses media queries to turn it
into a 2-, 3- and 4-column layout. In other words: "mobile-first".
A majority of you, however, are not studying the lecture slides and
therefore many of you went about it in the 'wrong direction'.

a) Start your stylesheet with some rules for a single-column layout - 
perfect for small-screen devices and adequate for people who are using 
old browsers that don't understand media queries.

Mostly it will contain CSS for colours, fonts, and so on. But it needs 
some additional things as well.

i) One additional thing is to take care of the images. You might include
this, for example:
    img
    {
	    width: 100%;
    }
...so that the images become 'flexible images', i.e. ones that the
browser scales so that their width equals the width of their parent.

But, in my solution I handled the banner image and the images in the three 
subsections, and the images in the news section slighty differently from 
each other:
    img
    {
        max-width: 100%;
    }
    
    header img
    {
        width: 100%;
    }
    
    #news img
    {
        float: left;
    	width: 20%;
    }

ii) In lectures, I showed you a trick that stops menu items in a vertical 
menu from overlapping. You do not need to do it with padding. Do it by 
making 'a' elements block-level:
    nav
    {
        text-align: center;
    }
    
    nav ul
    {
        list-style: none;
    }
        
    nav a
    {
        display: block;
    }
    
(I'm omitting declarations for padding, margins, borders, colour, etc. 
to try to keep this a bit more concise.)
        
iii) You might also adjust some margins, e.g. put small left- and 
right-margins on the #wrapper. (Personally, at this stage I would not 
set the width of #wrapper to 80% or whatever - we can't afford to waste 
20% of the screen of a mobile phone.) And you can take care of the page 
footer (including clearing it) and the article footers here too.

b) Optionally, if you're ambitious for extra marks, you might now do a media 
query that makes it 2-column if there's enough space.

    @media screen and (min-width: 480px)
    {
        ...
    }
    
So what goes in place of the dots (...) above?

Do not now repeat all the rules!

Just put in additional rules, or rules that conflict with earlier rules. 
(Assuming their selectors are equally specific as the ones for the earlier 
rules, they will win the conflict because they come later in the stylesheet).

What we basically need is to do the 'four steps':
i) float left #month and #franchises
ii) set their widths, e.g. to 48%
(At this point #offers and #news will 'pop up')
iii) clear #franchises
iv) set left margins of 50% on the things we didn't float (#offers and #news).
(The extra 2% allows for borders, padding, etc.)

c) Optionally, if you're ambitious for extra marks, you might now do a media
query that gives a 3-column layout if there's enough space.

    @media screen and (min-width: 768px)
    {
        ...
    }
 
To keep things concise, I won't go into the details of what goes in here in 
terms of the extra floats, etc for making a 3-column layout.

But this would be the place to turn the nav from a vertically stacked menu 
into a horizontal one:
	
    nav li
    {
        display: inline;
    }

    nav a
    {
        display: inline;
    }
	
This is also the point, in my opinion, to set the width of #wrapper to, say, 
80%, and to give it left- and right-margins of auto.	

d) Finally, you do a media query to give a 4-column layout if there's enough 
space.

    @media screen and (min-width: 1024px)
    {
        ...
    }
    
What should replace the dots? Well, first we need to make it 4-column. We've 
already floated the #month and #franchises above, so we don't need to do that 
again. What we need to do is the following:
i) float left #offers 
ii) change the widths of #month, #offers and #franchises to something suitable 
for a 4-column layout, e.g. 22%
(At this point, #news will 'pop up'.)
iii) change #franchises from 'clear: both' to 'clear: none' (and the same for
#news if you did a 3-column layout that gave it 'clear: none')
iv) set the left-margin on the thing we didn't float (#news) to about 68%.

Done!