Which code segment should you use?

You are developing an ASP.NET MVC web application for viewing a list of contacts. The
application is designed for devices that support changes in orientation, such as tablets and
smartphones. The application displays a grid of contact tiles in portrait mode. When the
orientation changes to landscape, each tile in the grid expands to include each contact’s
details. The HTML that creates the tiled interface resembles the following markup.

The CSS used to style the tiles in landscape mode is as follows.

If this CSS is omitted, the existing CSS displays the tiles in portrait mode. You need to
update the landscape-mode CSS to apply only to screens with a width greater than or equal
to 500 pixels. Which code segment should you use?

You are developing an ASP.NET MVC web application for viewing a list of contacts. The
application is designed for devices that support changes in orientation, such as tablets and
smartphones. The application displays a grid of contact tiles in portrait mode. When the
orientation changes to landscape, each tile in the grid expands to include each contact’s
details. The HTML that creates the tiled interface resembles the following markup.

The CSS used to style the tiles in landscape mode is as follows.

If this CSS is omitted, the existing CSS displays the tiles in portrait mode. You need to
update the landscape-mode CSS to apply only to screens with a width greater than or equal
to 500 pixels. Which code segment should you use?

A.
@media screen and (width >= 500px) {
. . .
}

B.
@media screen and (min-width: 500px) {
. . .
}

C.
@media screen (min-width: 500px, max-width: 1000px) {
. . .
}

D.
@media resolution (min-width: 500px) {
. . .
}



Leave a Reply 2

Your email address will not be published. Required fields are marked *


Maurizio

Maurizio

B

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

ul.contacts > li {
width: 150px;
}

ul.contacts > li > div {
display: block;
}
}

Deepak

Deepak

B.
@media screen and (min-width: 500px) {
. . .
}