You will use your text editor to add tablet and desktop media queries to a style sheet. You will create style rules for a tablet viewport and a desktop viewport. You then add a style rule for an image element to style the pictures in two columns for a tablet viewport and three columns for a desktop viewport. You will also use professional web development practices to indent, space, comment, and validate your code.

(css file below)

/* Style sheet created by: Amanda Eden, 1/27/2019 */

/* Style for body specifies a background color */ body { background-color: #CCFFCC; }

/* Style to create a fluid image */ img { max-width: 100%; margin: 1%; border: double 0.3em #000014; width: 100%; }

/* Style for the container centers the page and specifies the width */ #container { width: 100%; margin-left: auto; margin-right: auto; }

/* Style for the header specifies top margin, background color, rounded corners, and center align content */ header { font-family: Verdana, Arial, sans-serif; margin-top: 0.2em; text-align: center; }

/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders */ main { display: block; margin-top: 0.5em; padding: 1em; border-radius: 1em; background-color: #FFFFFF; box-shadow: .5em .5em .5em #404040; }

questions

4.In the applystyles06.css file, add a media query to target a tablet viewport. Use minwidth: 481px and include the following comment, Styles for tablet layout.

5.Create a new style rule for the img element to set the width to 45% within the tablet media query.

6. In the applystyles06.css file, add a media query to target a desktop viewport. Use min-width: 769px and include the following comment, Styles for desktop layout.

7.Create a new style rule for the img element to set the width to 30% within the desktop media query.

8. Save all of your changes and open the apply06.html in Google Chrome.

9. Use the developer tools in Google Chrome to view each viewports dimensions and determine a better viewport size for the desktop viewport

10. Modify the desktop media query with the new value in the applystyles06.css file.

Thank you for your help I have been stuck on this for 3 days.