Answered: In the large desktop media query, below…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

In the large desktop media query, below the last style rule, add the following style rules:

Add a style rule for the grid class selector that sets the grid template columns to a four column layout.
Add a style rule for the aside element that sets the grid column value to 1 / span 4, and set the font size to 3em.

My CSS

/*CSS Reset*/

body, header, nav, main, footer, img, h1, h3, ul, aside, figure, figcaption {

margin: 0;

padding: 0;

border: 0;

}

/*Style rules for body and images*/

body {

background-color: #f6eee4;

}

img {

max-width: 100%;

display: block;

}

/* Style rules for mobile viewport */

/* Style rules to show mobile class and hide tab-desk class */

.mobile {

display: block;

}

.tab-desk {

display: none;

}

/* Style rules for header area */

.mobile h1 {

padding:2%;

text-align:center;

font-family:'Emblema One', cursive;

}

.mobile h3 {

padding:2%;

text-align:center;

font-family:'Lora', serif;

}

/*Style rules for navigation area*/

nav {

background-color: #2a1f14;

}

nav ul {

list-style: none;

text-align: center;

}

nav li {

display: block;

font-size: 1.5em;

font-family: Geneva, Arial, sans-serif;

font-weight: bold;

border-top: solid;

border-width:0.5px;

border-color:#f6eee4;

}

nav li a {

display: block;

color: #f6eee4;

padding-top: 0.5em;

padding-bottom: 0.5em;

padding-left: 2em;

padding-right: 2em;

text-decoration: none;

}

.grid {

display: grid;

grid-template-columns: auto auto;

grid-gap: 10px;

}

aside {

grid-column: 1 / span 2;

}

/*Style rules for main content*/

main {

padding: 2%;

font-family: 'Lora', serif;

}

main p {

font-size: 1.25em;

}

main h3 {

padding-top: 2%;

}

main ul {

list-style: square;

}

/*Style rules for class and id selectors*/

.link {

color: #4d3319;

text-decoration: none;

font-weight: bold;

font-style: italic;

}

.action {

font-size: 1.75em;

font-weight: bold;

text-align: center;

}

.round {

border-radius: 6px;

}

aside {

text-align: center;

font-size: 1.5em;

font-weight: bold;

text-shadow: 4px 4px 10px #c5a687;

}

figure {

border: 4px solid #2a1f14;

box-shadow: 6px 6px 10px #c5a687;

max-width: 400px;

margin: 2% auto;

}

figcaption {

padding: 2%;

border-top: 4px solid #2a1f14;

}

#info ul {

margin-left: 10%;

}

#contact {

text-align: center;

}

.tel-link{

background-color: #2a1f14;

padding: 2%;

width: 80%;

margin-bottom: 0;

margin-top: 0;

margin-left: auto;

}

.tel-link a{

color: #f6eee4;

list-style: none;

font-weight: bold;

}

/*Style fules for footer content*/

footer {

text-align: center;

font-size: 0.85em;

background-color: #2a1f14;

color: #f6eee4;

padding: 1% 0;

}

footer a {

color: #f3e6d8;

text-decoration: none;

}

/* Media Query for Tablet Viewport */

/* Tablet view port */

@media only screen and (min-width:620px) {

/*Tablet Viewport: Show tab-desk class,hide mobile class*/

.tab-desk {

display: block;

}

.mobile {

display: none;

}

/*Tablet Viewport: Style rules for nav area*/

nav li {

border-top: none;

display: inline-block;

font-size: 1.25em;

}

nav li a {

padding: 0.5em;

}

/* Media Query for Large Desktop Viewports */

@media only screen and (min-width:1921px) {

body {

background: linear-gradient(#f6eee4, #78593a);

}

#wrapper {

width: 1920px;

margin-top: 0;

margin-bottom: 0;

margin-left: auto;

margin-right: auto;

}

main {

background: #f6eee4;

}

.grid {

grid-template-columns: auto auto auto auto;

}

aside {

grid-column: 1 / span 4;

font-size: 3em;

}

/* Media Query for Desktop Viewport */

@media only screen and (min-width:1000px), print {

}

/* Desktop Viewport: Style rules for nav area */

nav li {

font-size: 1.5em;

}

nav li a {

padding-top: 0.5em;

padding-bottom: 0.5em;

padding-left: 1.5em;

padding-right: 1.5em;

}

nav li a:hover {

color: #2a1f14;

background-color: #f6eee4;

opacity: 0.5;

}

.grid {

grid-template-columns: auto auto auto;

grid-gap: 30px;

}

aside {

grid-column: 1 / span 3;

font-size: 2em;

}

/* Desktop Viewport:Style rules for main content */

#info ul {

margin-left: 5%;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions