Mobile Styles

Mobile Styles

On mobile screens (480px and below), we need to make more dramatic changes. Multi-column layouts become single-column, the navigation is hidden, and everything needs to be touch-friendly.

Mobile Media Query

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

Mobile Header

@media (max-width: 480px) {
    #main-header {
        padding: 10px 0;
    }

    .logo img {
        width: 100px;
    }

    /* Show the hamburger button */
    .hamburger {
        display: block;
    }

    /* Hide the navigation by default */
    #main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #333;
        border-top: 1px solid #444;
    }

    /* When the nav is active (toggled via JS) */
    #main-nav.active {
        display: block;
    }

    #main-nav ul {
        flex-direction: column;
    }

    #main-nav ul li {
        margin: 0;
        border-bottom: 1px solid #444;
    }

    #main-nav ul li a {
        display: block;
        padding: 15px 20px;
        font-size: 16px;
    }
}

Mobile Hero

@media (max-width: 480px) {
    #hero {
        min-height: 300px;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .hero-text {
        font-size: 14px;
    }

    .hero-btn {
        font-size: 16px;
        padding: 12px 28px;
        width: 100%;
        text-align: center;
    }
}

Mobile Content Sections

@media (max-width: 480px) {
    #about,
    #services {
        padding: 40px 0;
    }

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

    /* About: already stacked from tablet query */
    .about-text p {
        font-size: 14px;
    }

    /* Services: single column */
    .service-card {
        flex: 0 0 100%;
    }

    .service-card img {
        height: 180px;
    }
}

Mobile Footer

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

    #main-footer h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-info li {
        justify-content: center;
    }

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

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

Touch Target Sizes

Mobile users interact with their fingers. Ensure all tappable elements are large enough:

Element	Minimum Size
Links	44px × 44px touch area
Buttons	44px height minimum
Nav links	Full-width tappable area
Form inputs	16px font (prevents iOS zoom)

Mobile-Specific Utility Styles

@media (max-width: 480px) {
    /* Full-width buttons on mobile */
    .btn {
        display: block;
        width: 100%;
        text-align: center;
    }

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

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

Complete Mobile Media Query

/* ==================
   MOBILE STYLES
   (max-width: 480px)
   ================== */
@media (max-width: 480px) {
    /* Header */
    #main-header { padding: 10px 0; }
    .logo img { width: 100px; }
    .hamburger { display: block; }
    #main-nav {
        display: none; position: absolute;
        top: 100%; left: 0; width: 100%;
        background: #333;
    }
    #main-nav.active { display: block; }
    #main-nav ul { flex-direction: column; }
    #main-nav ul li { margin: 0; border-bottom: 1px solid #444; }
    #main-nav ul li a { display: block; padding: 15px 20px; font-size: 16px; }

    /* Hero */
    #hero { min-height: 300px; text-align: center; }
    .hero-content h1 { font-size: 26px; }
    .hero-text { font-size: 14px; }
    .hero-btn { width: 100%; }

    /* Content */
    #about, #services { padding: 40px 0; }
    .section-title { font-size: 22px; }
    .service-card { flex: 0 0 100%; }

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

Key Takeaways

• At 480px, everything becomes single-column
• The hamburger button is shown, and the navigation is hidden by default
• Buttons become full-width for easy tapping
• All touch targets should be at least 44×44px
• Use overflow-x: hidden on body to prevent horizontal scrolling
• Center-align footer content on mobile for a clean look