Tablet Styles

Tablet Styles

With our desktop layout and fluid foundations in place, it's time to optimize for tablet screens. Tablets (roughly 768px–1024px) are a middle ground — too narrow for full desktop layouts, but too wide for single-column mobile designs.

Our Tablet Breakpoint

@media (max-width: 768px) {
    /* Tablet-specific styles */
}

Adjusting the Navigation

On tablets, we can keep the navigation visible but make it more compact:

@media (max-width: 768px) {
    .nav-links {
        gap: 15px;
    }

    .nav-links a {
        font-size: 13px;
        padding: 5px 8px;
    }

    .logo img {
        width: 120px;
    }
}

Grid Layout Adjustments

A 3-column desktop layout becomes 2-column on tablet:

/* Desktop: 3 columns */
.card-grid {
    display: flex;
    gap: 24px;
}
.card { flex: 1; }

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .card-grid {
        flex-wrap: wrap;
    }
    .card {
        flex: 0 0 calc(50% - 12px);
    }
}

Side-by-Side to Stacked

Two-column content sections (like image + text) should stack vertically:

@media (max-width: 768px) {
    .about-row {
        flex-direction: column;
    }

    .about-img,
    .about-text {
        width: 100%;
    }

    .about-img {
        margin-bottom: 24px;
    }
}

Hero Section Adjustments

@media (max-width: 768px) {
    .hero {
        min-height: 400px;
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 16px;
    }
}

Footer Grid

@media (max-width: 768px) {
    .footer-grid {
        flex-wrap: wrap;
    }

    .footer-col {
        flex: 0 0 calc(50% - 15px);
        margin-bottom: 24px;
    }
}

Spacing Reductions

Reduce vertical padding on sections and margins on tablet to use space more efficiently:

@media (max-width: 768px) {
    section {
        padding: 50px 0;
    }

    .section-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .container {
        width: 92%;
    }
}

Complete Tablet Stylesheet

/* ===========================
   TABLET STYLES (≤ 768px)
   =========================== */
@media (max-width: 768px) {
    /* Navigation */
    .nav-links { gap: 15px; }
    .nav-links a { font-size: 13px; }
    .logo img { width: 120px; }

    /* Hero */
    .hero { min-height: 400px; }
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 16px; }

    /* Sections */
    section { padding: 50px 0; }
    .section-title { font-size: 26px; margin-bottom: 30px; }

    /* About: stack */
    .about-row { flex-direction: column; }
    .about-img, .about-text { width: 100%; }

    /* Cards: 2 columns */
    .card-grid { flex-wrap: wrap; }
    .card { flex: 0 0 calc(50% - 12px); }

    /* Footer: 2 columns */
    .footer-col { flex: 0 0 calc(50% - 15px); margin-bottom: 24px; }
}

Testing Tablet Styles

1. Open DevTools (F12) → toggle device toolbar (Ctrl+Shift+M)
2. Select iPad or set width to 768px
3. Also test at 1024px (landscape tablet) to ensure nothing breaks
4. Slowly drag the viewport width between 768px and 1024px — layout should feel smooth

Key Takeaways

• Tablets are the middle breakpoint — not desktop, not mobile
• 3-column grids become 2-column; side-by-side sections stack vertically
• Reduce padding, margins, and font sizes proportionally
• Navigation can stay visible but needs smaller sizing
• Test at both 768px (portrait) and 1024px (landscape)