Question

Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the web page. The style rule for the body element sets up a grid layout for the page. However, there are several errors in defining the grid areas, grid columns, and grid gaps. Fix the syntax errors in the style rule.

There are issues with grid column styles globally in debug3-4.css.

Go to the style rules in the "Grid Areas" section that assigns page elements to areas of the grid. Locate and fix the errors in assigning elements to grid areas. The style rules for the horizontal navigation list and the section element also define grid styles for those elements. Locate and fix errors in the code that set up the grid columns. The last paragraph within the section div selector should be placed with absolute positioning 1 pixel and 5 pixels from the bottom right corner of the container element. However, there is an error in defining the selector. Find and fix the error.

@charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 3 Coding Challenge 4 Author: Matthew Arigoni Date: 10/06/2020 Filename: debug3-4.css */ /* Page Body Styles */ body { width: 90%; min: 600px; max: 1024px; margin: 10px auto; display: grid; grid-template-columns: 200px auto 200px; grid-template-areas: "header header header"; "link link link"; "nav main side"; "nav coupons side"; "footer footer footer"; grid-gap: 10px/25px; } /* Grid Areas */ header {grid-area: headers;} nav.horizontal {grid-area: links;} nav.vertical {grid-area: navs;} article {grid-area: main;} section {grid-area: coupons;} aside {grid-area: sides;} footer {grid-area: footers;} /* Image Styles */ header img { display: block; width: 100%; } /* Horizontal Navigation List Styles */ nav.horizontal ul { width: 100%; display: grid; grid-columns-template: repeat 5/1fr; } nav.horizontal ul li { display: block; text-align: center; } /* Coupon Section Styles */ section { display: grid; grid-columns-template: repeat 3/1fr; grid-gap: 20px; } section div { outline: 4px dashed gray; position: relative; } section div p.last-of-type { position: absolute; bottom: 1px; right: 5px; }

Answer 1

EXPLANATION:

body {
  width: 90%;
  min-width: 600px;
  max-width: 1024px;
  margin: 10px auto;
  display: grid;
  grid-template-columns: 200px auto 200px;
  grid-template-areas: "headers headers headers";
  grid-template-areas: "links links links";
  grid-template-areas: "navs main sides";
  grid-template-areas: "navs coupons sides";
  grid-template-areas: "footers footers footers";
  grid-gap: 10px 25px;
}

/* Grid Areas */

header {
  grid-area: headers;
}

nav.horizontal {
  grid-area: links;
}

nav.vertical {
  grid-area: navs;
}

article {
  grid-area: main;
}

section {
  grid-area: coupons;
}

aside {
  grid-area: sides;
}

footer {
  grid-area: footers;
}

/* Image Styles */

header img {
  display: block;
  width: 100%;
}

/* Horizontal Navigation List Styles */

nav.horizontal ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat (5, 1fr);
}

nav.horizontal ul li {
  display: block;
  text-align: center;
}

/* Coupon Section Styles */

section {
  display: grid;
  grid-template-columns: repeat (3, 1fr);
  grid-gap: 20px;
}

section div {
  outline: 4px dashed gray;
  position: relative;
}

section div p:last-of-type {
  position: absolute;
  bottom: 1px;
  right: 5px;
}

Here, I have made all the necessary corrections in the given code.

THANKS,

FEEL FREE TO POST COMMENTS AND PLEASE UPVOTE THE ANSWER.