7. Sofia also wants to reduce the clutter in the mobile version of the home page
ID: 3588948 • Letter: 7
Question
7. Sofia also wants to reduce the clutter in the mobile version of the home page. Hide the following elements for mobile users: the aside and the spotlight section element. element, any img element within the article element, 8 At the top of the web page is a navigation list with the ID top. For mobile devices, display S: element within this navigation list as a flexbox row with wrapping, or each list item wit ul element, set the font size to 2.2em. Size the list items by setting their flex values to i fo growth and shrink rates and 130 pixels for the basis value. 9, Under the mobile layout, the six list items in the top navigation list should appear as blocks with different background images. Using the selector navftop ul liinth-oi for the first list item, create a style rule that changes the background to the background 12 cw image01.png. Center the background image with no tiling and size it so that the enires imag is contained within the backgroundExplanation / Answer
the answer for 7th question is as follows:
Hiding of aside element can be achieved with the help of CSS and media queries
@media screen and (max-width: 600px) {
aside {
visibility: hidden;
display: none;
}
article > img{
visibility: hidden;
display: none;
}
Section {
visibility: hidden;
display: none;
}
}
here the @media is the denotion to start a media query and to let the CSS to identify and apply these rules if the conditions in the query are satisfied.
here screen define the MEDIATYPE which can be
1) all- for all media types
2) print - for print purpose
3) screen - for mobile or desktop or tablet screens
4) speech - for screen readers
max-width is a media feature which indicated the maximum area of display.
600 is the maximum are of display in this case which is a maximum value for any mobile screen.
the below css properties are applied to the aside element once the media query condition is satisfied.
1) visibility: hidden - this property hides the visibility of the element and makes the element invisible but the area occupied by this element is not hidden.
2) display: none - this property will hide the element and the area occupied by this.
The same can be repeated for the image element in the article and section element.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.