Use media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0. 2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following: Set the display of the img elem
Use media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0. 2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following: Set the display of the img elem
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 4CP3
Related questions
Question
Use media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels.
1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0.
2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following:
- Set the display of the img element within the article element to none.
- Center the text contained within the ul element belonging to the submenu class.
3. Create a media query for devices with a minimum width of 501 pixels. Within the query do the following:
- Float the nav element on the left page margin.
- Set the width of the nav element to 130 pixels and the height to 400 pixels.
- Set the top margin of the nav element to 30 pixels, the right margin to 25 pixels, and the bottom and left margins to 0 pixels.
4. Create a media query for devices with a minimum width of 710 pixels. Within the query do the following:
- Set the float property of the nav element to none, its width to 100% and its height to auto. Set the nav element margins to 0.
- Set the display of ul elements of the mainmenu class to flex with the flex flow in the row direction with no wrapping; justify the contents of the flexbox in the center.
- Set the flex property of li elements with the ul.mainmenu element to have a growth factor of 0, a shrink factor of 1, and a basis value of 120 pixels.
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 3 images
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.Recommended textbooks for you
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
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L
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
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:
9780357392676
Author:
FREUND, Steven
Publisher:
CENGAGE L