Assignment.2-2 (Chapter.

7 Media Queries & Responsiveness) instructions

This assignment is a continuation of the previous assignment with a focus on the application of media queries for
responsive layout configuration for various viewport sizes. The expected outputs for home and plants page are given
blow:

Task.1 – create case study folder

1. Copy the entire case study folder “garden2.1” and name the copy as “garden2.2”

Task.2 – HTML

1. On home page, duplicate the <p> element of telephone information inside <address> in place, and assign
“desktop’ class and “mobile” class to each of them. Create a telephone link (using tel: scheme) to enclose the
phone number inside the <p class=”mobile>.
2. On each page, assign “desktop” class to images with id=”heroimg”;

∗ “.mobile” and “.desktop” class are to be used to toggle the display of elements in different views

Tablet views (the bottom views of pages are not shown)

Mobile View Home Page Above Mobile View of Plants Page (no bottom of page shown)

Task.3 - CSS

1. Under desktop view (the default view), hide “.mobile” class by setting the display property to “none” (this will
hide the telephone link)
2. Use media queries to add a responsive view for tablet devices when the viewport width reduces below 1024px:
a. Reset “float” property <nav> to “none”;
b. Change the display property of list items inside <nav> to “inline-block” so that they appear in the same
row; to keep quick links stacked up meanwhile, use “footer nav ul li” as selector to keep their display
property as “block”;
c. Change the font size of <h1> to “2.5em”;
d. Change the padding of “nav a” to “padding:10px 30px”;
e. Turn off “float” on the selector “#categories section” and set its width to “100%”.
3. Use media queries to add a responsive view for mobile devices when the viewport size reduces further below
760px;
a. Hide “.desktop” class under mobile view by setting “display:none”; and show “.mobile” class by setting
“display:block”;
b. Apply “border-bottom: 1px solid ” using your primary colour on <nav> to create a visual separation from
the <main> element;
c. Change the width of “.item25” class to “50%”;
d. Stack up all main navigation links by restoring the display property of list items inside <nav> to “block”;
e. For all images inside “#categories”, reduce the size to “120px” in both width and height;
f. Stack up all “.item33” class blocks inside <footer> by turning off its “float” property, and changing the
“display” property to “block”; and then give them 40% left padding to place the text in page center
(roughly);