Question

1. Examine your CSS and find places where you can use relative values to make your page

elements more responsive without breaking the overall appearance of your site. For
example, can you apply a % value to the width of an image instead of an absolute px value
– and does this work okay?
2. At the bottom of your CSS Style Sheet, Create a media query that triggers when your screen
width is less than 960px.
3. Apply new styling appropriately within the media query that adjusts page elements for a
mobile phone screen in portrait orientation.
4. Make use of Google Chrome Browser Developer Tools to test out mobile options before
implementing them.
5. Your final responsive solution should adjust the styling of your desktop solution so that it is
“touch-friendly” and clear for a vertical portrait-oriented mobile phone.
NOTE: It is perfectly okay to have a responsive solution that results in much taller pages
that require a lot of vertical scrolling; BUT it is definitely NOT okay if the user has to scroll
horizontally or zoom in/out to access content.

Answer 1

[AI-generated answer — Bot GPT 3.5]

6. Test your responsive design on various devices to ensure that it looks good and functions properly on different screen sizes.

7. Consider using CSS grid or flexbox to make your layout more flexible and adaptable to different screen sizes.
8. Optimize images and other media for faster loading times on mobile devices.
9. Use font sizes and spacing that are comfortable to read and interact with on a small screen.
10. Continuously test and refine your responsive design to ensure the best user experience on all devices.