Mobile Styles

Mobile Styles

At the mobile breakpoint (480px and below), we make the most significant layout changes. Everything becomes single-column, the navigation hides behind a toggle, and all interactive elements become touch-friendly.

Mobile Breakpoint

@media (max-width: 480px) {
    /* Mobile-specific styles */
}

Mobile Navigation

The full navigation bar is replaced by a hamburger menu:

@media (max-width: 480px) {
    /* Show hamburger icon */
    .menu-toggle {
        display: block;
    }

    /* Hide the nav links by default */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #222;
        flex-direction: column;
    }

    /* Show nav when toggled */
    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 15px 20px;
        font-size: 16px;
        border-bottom: 1px solid #333;
    }
}

Mobile Hero Section

@media (max-width: 480px) {
    .hero {
        min-height: 280px;
        text-align: center;
        padding: 40px 0;
    }

    .hero h1 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .hero p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .hero .btn {
        display: block;
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
}

Single-Column Content

@media (max-width: 480px) {
    /* Cards: full width, single column */
    .card {
        flex: 0 0 100%;
    }

    .card img {
        height: 180px;
    }

    /* Section spacing */
    section {
        padding: 36px 0;
    }

    .section-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

Mobile Footer

@media (max-width: 480px) {
    .footer-col {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: 28px;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        font-size: 12px;
        padding: 16px 0;
    }
}

Touch Target Guidelines

Mobile users tap with fingers, which are far less precise than a mouse cursor:

Guideline	Minimum Size	Source
Apple HIG	44 × 44 points	iOS Human Interface Guidelines
Google Material	48 × 48 dp	Material Design Guidelines
WCAG 2.5.8	24 × 24 CSS pixels	Web Content Accessibility Guidelines

/* Ensure links and buttons are tappable */
@media (max-width: 480px) {
    a, button {
        min-height: 44px;
        padding: 12px 16px;
    }
}

Preventing Common Mobile Issues

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
}

/* Prevent iOS auto-zoom on input focus */
input, select, textarea {
    font-size: 16px;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive tables */
table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Complete Mobile Stylesheet

/* ===========================
   MOBILE STYLES (≤ 480px)
   =========================== */
@media (max-width: 480px) {
    /* Navigation */
    .menu-toggle { display: block; }
    .nav-links {
        display: none; position: absolute;
        top: 100%; left: 0; width: 100%;
        background: #222; flex-direction: column;
    }
    .nav-links.open { display: flex; }
    .nav-links a { display: block; padding: 15px 20px; font-size: 16px; }

    /* Hero */
    .hero { min-height: 280px; text-align: center; }
    .hero h1 { font-size: 24px; }
    .hero p { font-size: 14px; }
    .hero .btn { display: block; width: 100%; }

    /* Content */
    section { padding: 36px 0; }
    .section-title { font-size: 22px; }
    .card { flex: 0 0 100%; }

    /* Footer */
    .footer-col { flex: 0 0 100%; text-align: center; }
}

Key Takeaways

• Mobile layouts are single-column with stacked content
• Navigation hides behind a hamburger toggle (built in the next episode)
• All touch targets must be at minimum 44×44px
• Buttons go full-width for easy tapping
• Set font-size: 16px on inputs to prevent iOS auto-zoom
• Use overflow-x: hidden to prevent horizontal scrolling