In the age of mobile devices, media queries are VITAL. If your website isn't optimized for viewing on a mobile device, there's a good chance few will ever view it at all! Complete this challenge to see how much you remember about media queries and responsive web design principles - as always, the curriculum is your friend! Visit your friend if you need advice!
Instructions:
a) Change the width of the .container class to 90% and add a margin property to center it horizontally.
b) Add a media query that targets screen sizes with a maximum width of 768px. Inside the media query, set the width of the .column class to 80% and remove the float property.
c) Apply a media query to target the orientation of a device. Inside the media query for portrait orientation, change the background color of the .container class to #ccc. Inside the media query for landscape orientation, change the background color of the .container class to #eee.
d) Implement a media query to target devices with a pixel density of 2 or higher. Inside the media query, change the border color of the .column class to red.
e) Apply CSS styles within a media query to stack the navigation menu items vertically and adjust the font size for better readability on screens with a maximum width of 768px.
f) Make the layout of the menu items responsive using CSS flexbox or CSS grid.
g) Add a transition effect or animation to the navigation menu to provide smooth interactions.