Problem Set 04

Problem Set 04

Due: Sunday, January 26, 2026 at 11:59pm

Status: Submitted on January 24, 2026

This problem set focused on responsive design using media queries and the Bootstrap CSS framework.

Problem A: Code Changes

• Added viewport meta tag with width=device-width, initial-scale=1, shrink-to-fit=no
• Mobile-first CSS approach with 4 media queries (598px, 768px, 992px, 1200px)
• Default (extra-small): blue background (#93b8d7), white text, .5rem margin, hidden social links and footer
• Nav icons: white, 2.5rem, .5em margin-right
• Main content: centered, Kaushan Script/fantasy font, 23vh top margin, h1 4rem, h2 2rem with 2em top margin
• 598px+: hide hamburger, show social links as block
• 768px+: background image (splash-md.jpg), html height 100%, text-shadow, fixed footer bottom-right
• 992px+: larger background (splash-lg.jpg), nav links 1.5rem, h1 5rem, h2 3rem
• 1200px+: highest res background (splash-xl.jpg)

Problem B: Code Changes

• Added viewport meta tag and Bootstrap 5 CDN link
• Header styled as Jumbotron: container-fluid bg-dark text-white py-5 with nested container
• Subtitle styled with lead class
• 4 cards with card, card-body, card-title, card-text classes
• Play links styled as btn btn-dark
• Images with pb-3 (bottom padding), cards with mb-4 (bottom margin)
• Grid row wrapping all cards, each in col-md-6 col-xl-3 d-flex column
• Nested grid inside card-body for responsive image placement
• Image column: col-sm-auto col-xl-12, text column: col-sm