[Solved]Go Gpcoverhtml File Add Viewport Meta Tag Document Head Setting Width Layout Viewport Devi Q37235426

Go to the gp_cover.html file and add a viewportmeta tag to the document head, setting the width of the layoutviewport to the device width and setting the initial scale of theviewport to 1.0.

Go to the gp_layout.css file. In this stylesheet, you’ll create the layout styles for mobile and desktopdevices. Note that Devan has used the @import rule to import thegp_designs.css file, which contains several graphical andtypographical style rules.

Return to the gp_cover.html file and createlinks to the following style sheets:

• the gp_reset.css file to be used with alldevices,
• the gp_layout.css file to be used with screendevices
• the gp_print.css file to be used for printedoutput

Preview

Take some time to study the contents and structure of the file.Note each panel from the comic book is stored as a separate inlineimage with the class name panel along with class names ofsize1 to size4 indicating the size of the panel.Size1 is the largest panel down to size4, which is the smallestpanel.

Repeat the actions described above to create links to the stylesheet files gp_reset.css,gp_layout.css, and gp_print.cssin gp_page1.html, gp_page2.html,and gp_page3.html .

Flex Layout Styles

Open the gp_layout.css file and go to the FlexLayout Styles section and insert a style rule to display the pagebody as a flexbox oriented as rows with wrapping. As always,include the latest WebKit browser extension in all of your flexstyles.

The page body content has two main elements. The section elementwith the ID #sheet contains the panels from the comic book page.The articleelement contains information about the comic bookindustry during the Golden Age. Devan wants more of the page widthto be given to the comic book sheet. Add a style rule that sets thegrowth and shrink rate of the sheet section to 3 and 1 respectivelyand set its basis size to 301 pixels.

Less page width will be given to the article element. Create astyle rule to set its flex growth and shrink values to 1 and 3respectively and set its basis size to 180 pixels.

Panel Images

Go to the Mobile Devices section and create a media query forscreen devices with a maximum width of 480 pixels.

With mobile devices, Devan wants each comic book panel image tooccupy a single row. Create a style rule that sets the width ofimages belonging to the .panel class to 100%.

Horizontal Navigation

For mobile devices, Devan wants the horizontal navigation linksto other pages on the Golden Pulps website to be displayed near thebottom of the page. Within the media query, set the flex order ofthe horizontal navigation list to 99.

Footer Styles

Create a style rule to set the flex order of the body footer to100. (Hint: There are two footer elements in the document, use aselector that selects the footer element that is a direct child ofthe body element.)

Images

Go to the Tablet and Desktop Devices: Greater than 480 pixelssection and create a media query that matches screen devices withwidths greater than 480 pixels.

With wider screens, Devan does not want the panels to occupytheir own rows as is the case with mobile devices. Instead, withinthe media query create style rules, define the width of thedifferent classes of comic book panel images as follows:

• Set the width of size1 img elements to 100%.
• Set the width of size2 img elements to 60%.
• Set the width of size3 img elements to 40%.
• Set the width of size4 img elements to 30%.

Horizontal Navigation List

For tablet and desktop devices, you’ll lay out the horizontalnavigation list as a single row of links. Within the media query,create a style rule that displays the ul element within thehorizontal navigation list as a flexbox, oriented in the rowdirection with no wrapping. Set the height of the element to 40pixels

For each li element within the ul element of the horizontalnavigation list set their growth, shrink, and basis size values to1, 1, and auto respectively so that each list items grows andshrinks at the same rate.

Assessment

Go to the gp_cover.html and click the “BuildWebsite” button then click the navigation links to view thecontents of the cover and first three pages. Verify that with anarrow screen the panels occupy their own rows and with a widerscreen the sheets are laid out with several panels per row. Furtherverify that the horizontal navigation list is placed at the bottomof the page for mobile devices

Expert Answer

---

Answer to Go to the gp_cover.html file and add a viewport meta tag to the document head, setting the width of the layout viewport … . . .