In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Large Desktop Viewports. Below the comment, add a media query that targets a screen with a minimum width of 1921px. Add the following style rules to the large desktop media query: Style rule for the body element that sets the background to a linear-gradient with the color values #f6eee4 and #78593a Style rule for the #wrapper selector that sets the width to 1920px, top and bottom margin to 0, and left and right margins to auto Style rule for the main selector that sets the background-color to #f6eee4. --my CSS-- /*Media Query for Large Desktop Viewports */    @media screen and (min-width: 1921px) {     /*Style rule for body*/     .gradient {       background: linear-gradient(#f6eee4, #78593a);     }     #wrapper {       width: 1920px;       margin-top: 0;       margin-bottom: 0;       margin-right: auto;       margin-left: auto;     }     main {       background-color: #f6eee4;     } }

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter7: Designing A Web Form: Creating A Survey Form
Section: Chapter Questions
Problem 12RA
icon
Related questions
Question

In the styles.css file, below the tablet media query, add a comment with the text, Media Query for Large Desktop Viewports.

Below the comment, add a media query that targets a screen with a minimum width of 1921px. Add the following style rules to the large desktop media query:

  • Style rule for the body element that sets the background to a linear-gradient with the color values #f6eee4 and #78593a
  • Style rule for the #wrapper selector that sets the width to 1920px, top and bottom margin to 0, and left and right margins to auto
  • Style rule for the main selector that sets the background-color to #f6eee4.

--my CSS--

/*Media Query for Large Desktop Viewports */ 
  @media screen and (min-width: 1921px) {
    /*Style rule for body*/
    .gradient {
      background: linear-gradient(#f6eee4, #78593a);
    }
    #wrapper {
      width: 1920px;
      margin-top: 0;
      margin-bottom: 0;
      margin-right: auto;
      margin-left: auto;
    }
    main {
      background-color: #f6eee4;
    }
}
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

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.
Similar questions
  • SEE MORE QUESTIONS
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
Np Ms Office 365/Excel 2016 I Ntermed
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage