Website 1-a - Make it Responsive
We have added a little bit to the stylesheet for this website. Now, the text and images resize as the screen becomes smaller until at a screen width of 700 pixels, the middle column jumps to the top and the two sidebars appear sided by size below.
Click for demo:
To accomplish this, we have made a copy of the HTML for the first sidebar column and inserted it beneath the second one. We have given the first copy a class name of 'large-screen-visible' and the second copy a class name of 'small-screen-visible', initially hidden. At 700 px, 'large-screen-size' is hidden and 'small-screen-size' is displayed.
The file structure has not changed, but you can see the changes in the stylesheet.