FastHTML Responsive Patterns

Common responsive issues in FastHTML apps and recommended fixes.

Container Width Issues

Problem: Content overflows on mobile

# Before - no max-width constraint
Div(content, cls="container")

# After - constrained with padding
Div(content, cls="container", style="max-width: 100%; padding: 0 1rem; box-sizing: border-box;")

Grid/Flexbox Stacking

Problem: Columns don't stack on narrow screens

# Before
Div(
    Div("Column 1", cls="col"),
    Div("Column 2", cls="col"),
    style="display: flex; gap: 2rem;"
)

# After - wrap for stacking
Div(
    Div("Column 1", cls="col", style="flex: 1 1 300px;"),
    Div("Column 2", cls="col", style="flex: 1 1 300px;"),
    style="display: flex; flex-wrap: wrap; gap: 1rem;"
)

Touch Target Sizing

Problem: Buttons too small on mobile

# Before
Button("Submit", cls="btn")

# After - minimum 44x44px
Button("Submit", cls="btn", style="min-height: 44px; min-width: 44px; padding: 0.75rem 1.5rem;")

Table Responsiveness

Problem: Tables overflow horizontally

# Wrap tables in scrollable container
Div(
    Table(...),
    style="overflow-x: auto; -webkit-overflow-scrolling: touch;"
)

Typography Scaling

Problem: Text too small or lines too long

/* Add to your base styles */
body {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.6;
}

h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
}

/* Limit line length for readability */
p, li {
    max-width: 65ch;
}

Meta Viewport Tag

Required in all FastHTML apps:

Head(
    Meta(name="viewport", content="width=device-width, initial-scale=1"),
    ...
)

Common CSS Utilities

Add these utility classes for quick responsive fixes:

/* Hide on specific breakpoints */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* Stack flex children on mobile */
@media (max-width: 767px) {
    .stack-mobile {
        flex-direction: column !important;
    }
    .stack-mobile > * {
        width: 100% !important;
    }
}

/* Full width on mobile */
@media (max-width: 767px) {
    .full-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}

Image Responsiveness

# Always use max-width for images
Img(src="...", style="max-width: 100%; height: auto;")

Navigation Patterns

For mobile navigation, consider a hamburger menu or bottom nav:

# Simple mobile-first nav structure
Nav(
    # Logo always visible
    A("Logo", href="/", cls="nav-logo"),
    # Menu toggles on mobile
    Button("☰", cls="nav-toggle hide-desktop", onclick="toggleMenu()"),
    # Links hidden on mobile, shown on desktop
    Div(
        A("Home", href="/"),
        A("About", href="/about"),
        cls="nav-links hide-mobile"
    ),
)