Open the debug3-4.css file. 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.
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
nav.horizontal {
background-color:rgba(154,20,23,1.00);
height: 30px;
}
nav.horizontal a {
color: white;
}
nav.vertical ul {
line-height: 2em;
}
article p {
font-size: 1.2em;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
aside ul li {
margin: 15px 5px;
background-color:rgba(229,129,131,1.00);
padding: 5px;
}
a {
text-decoration: none;
color: rgb(101, 101, 101);
}
section div h1 {
font-size: 1em;
text-align: center;
background-color:rgba(154,20,23,1.00);
color: white;
margin: 0;
}
section div {
padding-bottom: 20px;
}
section div p {
font-size: 0.9em;
text-align: center;
}
section div p:last-of-type {
font-size: 0.65em;
text-align: right;
color:rgba(154,20,23,1.00);
}
aside h1 {
text-align: center;
font-size: 1.2em;
font-weight: normal;
}
footer {
text-align: center;
color: white;
font-size: 1em;
height: 30px;
line-height: 30px;
background-color:rgba(154,20,23,1.00);
}
body {
font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; /* font family names must be written in ""*/
width : 90% /*this will set the 90%width of the body element */
min-width:600px; /* this line will set the minimum width */
max-width: 1024px; /*this line will set maximum width*/
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
}
nav.horizontal {
background-color:rgba(154,20,23,1.00);
height: 30px;
}
nav.horizontal a {
color: white;
}
nav.vertical ul {
line-height: 2em;
}
article p {
font-size: 1.2em;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
aside ul li {
margin: 15px 5px;
background-color:rgba(229,129,131,1.00);
padding: 5px;
}
a {
text-decoration: none;
color: rgb(101, 101, 101);
}
section div h1 {
font-size: 1em;
text-align: center;
background-color:rgba(154,20,23,1.00);
color: white;
margin: 0;
}
section div {
padding-bottom: 20px;
}
section div p {
font-size: 0.9em;
text-align: center;
}
section div p:last-of-type {
font-size: 0.65em;
text-align: right;
color:rgba(154,20,23,1.00);
}
aside h1 {
text-align: center;
font-size: 1.2em;
font-weight: normal;
}
footer {
text-align: center;
color: white;
font-size: 1em;
height: 30px;
line-height: 30px;
background-color:rgba(154,20,23,1.00);
}
In the question above it is asked to set the width of the body element to 90% of the current window's width also that this width should not exceed the minnimum width and the maximum width which is provided as 600 pixels(px) and 1024 pixels(px)
in the whole code only body {} part will have some tweeks as follows-
body {
font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; <- like in this line all the font families must be inside double inverted comas ("") so that browser can search for these fonts in computer also the generic fonts like -sans,arial,serif,times. these must have the last space in your code like above because if browser coudn't find the font written first it will search for the next mentioned font family
width : 90% /*this will set the 90%width of the body element */
to set the width of the body element relative to the window size we use % option to mention the width of that element so to say that i want 90% of the size of that window we write width: 90%
min-width:600px; /* this line will set the minimum width */
max-width: 1024px; /*this line will set maximum width*/
these both lines are to specify the maximum and the minimum range fo the window or element like here body
}
everything other than this is fine in this code the spaces in between the names like "section div p" means that this style will apply to all paragraphs which are inside a div which is inside a section
Get Answers For Free
Most questions answered within 1 hours.