I. 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. II. 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. III. 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.

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

I. 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.

II. 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.

III. 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

Step 1

I. To create a media query for devices with a maximum width of 500 pixels, you can use the following code:

@media only screen and (max-width: 500px) {
article img {
display: none;
}
ul.submenu {
text-align: center;
}
}

This code targets screens with a maximum width of 500 pixels and sets the display property of the img element within the article element to none, effectively hiding it. It also centers the text within the ul element with the submenu class.

Trending now

This is a popular solution!

Step by step

Solved in 3 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