Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
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.

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.

New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter5: Designing For The Mobile Web: Creating A Mobile Website For A Daycare Center
Section: Chapter Questions
Problem 22RA
See similar textbooks
icon
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;
    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

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Hyperlinks
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.
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
SEE MORE TEXTBOOKS