HTML5 and CSS3 trouble:

I am stuck on these following steps:

Go to the Tablet and Desktop Devices: Greater than 480 pixels section and create a media query that matches screen devices with widths greater than 480 pixels.

With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows:

Set the width of size1 img elements to 100%.

Set the width of size2 img elements to 60%.

Set the width of size3 img elements to 40%.

Set the width of size4 img elements to 30%.

Horizontal Navigation List

For tablet and desktop devices, youll lay out the horizontal navigation list as a single row of links. Within the media query, create a style rule that displays the ulelement within the horizontal navigation list as a flexbox, oriented in the row direction with no wrapping. Set the height of the element to 40 pixels

For each li element within the ul element of the horizontal navigation list set their growth, shrink, and basis size values to 1, 1, and auto respectively so that each list items grows and shrinks at the same rate.

Assessment

Go to the gp_cover.html and click the "Build Website" button then click the navigation links to view the contents of the cover and first three pages. Verify that with a narrow screen the panels occupy their own rows and with a wider screen the sheets are laid out with several panels per row. Further verify that the horizontal navigation list is placed at the bottom of the page for mobile devices

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 5

Case Problem 1

Author:

Date: 4/1/2018

Filename: gp_layout.css

This file contains the layout styles and media

queries used with sample pages from the Golden

Pulps website.

*/

/* Import Basic Design Styles Used on All Screens */

@import url("gp_designs.css");

/* Flex Layout Styles */

body{

display: flex;

display: -webkit-flex;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

}

section#sheet{

flex-grow: 3;

flex-shrink: 1;

flex-basis: 301px;

}

article#sheet{

flex-grow: 1;

flex-shrink: 3;

flex-basis: 180px;

}

/* ============================================

Mobile Devices: 0 - 480 pixels

============================================

*/@media only screen and (max-width: 480px) {

.panel {

width: 100%;

}

nav.horizontal ul{

display: 99;

}

}

body > footer{

order: 100;

}

/* ===================================================

Tablet and Desktop Devices: Greater than 480 pixels

===================================================

*/