Modify the HTML. The content class will be used to indicate to the browser when to configure
Question:
Modify the HTML. The content class will be used to indicate to the browser when to configure the main element area specifically for a three-column content page. Edit the yurts.html file. Addclass="content" to the opening body tag. Save the file. Edit theactivities.html file. Add class="content" to the opening body tag. Save the file.
Modify the CSS. Edit the pacific.css file and configure the grid. The first row contains the h2 element. The second row contains any section elements, the third row (the #special id) will be used in the Chapter 9 case study. The last row contains the footer row. Add the following styles to the media query to configure the main element when it appears on a web page within the. content class. .content main { display: grid; grid-template-rows:auto; grid-template-columns: 1fr 1fr 1fr; } h2 { grid-row: 1 / 2;grid-column: 1 / 5; } section { grid-row: 2 / 3; grid-column: auto;} #special { grid-row: auto; grid-column: 1 / 5; } footer {grid-row: auto; grid-column: 1 / 5; }
This is what my output looks like, It is wrong because the 3 h3parts of the section element are supposed to be side by side in columns, not stacked in rows: