6. Responsive Web Design/Media Queries
Activity 6.01: Refactoring the Video Store Product Cards into a Responsive Web Page
Solution
- Save a new HTML file called
Activity 6.01.htmlusing the existing code from Chapter 3, Text and Typography, Exercise 3.06, Putting It All Together. Insert the viewport meta tag into the<head>of the HTML document. This would be inserted at the top of the<head>section, ideally, as follows:<!DOCTYPE html> <html lang = "en"> <head> Â Â <meta name="viewport" content="width=device-width, initial-scale=1" /> Â Â <title>Video store home page</title>
- In order to make the CSS mobile first, we must first remove the desktop-only styling and add new mobile-friendly styles. Remove the fixed width of
1,200pxfrom the<body>tag. - Edit the
<header>styling to remove thedisplay,align-items, andmargin-bottomproperties, as these are not...
