Tablet Styles

Tablet Styles

Our website looks great on desktop, but when viewed on a tablet (768px and below), the layout needs adjustments. We'll use CSS media queries to adapt the design for tablet screens.

What Are Media Queries?

Media queries let you apply CSS rules only when certain conditions are met — typically based on screen width:

@media (max-width: 768px) {
    /* These rules only apply when the screen
       is 768px wide or narrower */
}

Common Breakpoints

Breakpoint	Target
max-width: 1024px	Small desktop / large tablet
max-width: 768px	Tablet (portrait)
max-width: 480px	Mobile

Tablet Header Adjustments

@media (max-width: 768px) {
    .logo img {
        width: 120px;
    }

    #main-nav ul li {
        margin-left: 15px;
    }

    #main-nav ul li a {
        font-size: 13px;
    }
}

Hero Section on Tablet

@media (max-width: 768px) {
    #hero {
        min-height: 400px;
    }

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

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

About Section: Side-by-Side to Stacked

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

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

The key property here is flex-direction: column — it changes the flex layout from horizontal (row) to vertical (column), stacking the image above the text.

Services Grid: 3 Columns to 2

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

    .service-card {
        flex: 0 0 calc(50% - 15px);
    }
}

The calc(50% - 15px) makes each card exactly half-width minus half the gap, giving us a clean two-column layout.

Footer on Tablet

@media (max-width: 768px) {
    .footer-col {
        flex: 0 0 calc(50% - 15px);
    }
}

Footer columns go from 4 across to 2 across, creating two rows of two columns.

Section Spacing

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

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

Complete Tablet Media Query

/* ==================
   TABLET STYLES
   (max-width: 768px)
   ================== */
@media (max-width: 768px) {
    /* Header */
    .logo img { width: 120px; }
    #main-nav ul li { margin-left: 15px; }
    #main-nav ul li a { font-size: 13px; }

    /* Hero */
    #hero { min-height: 400px; }
    .hero-content h1 { font-size: 36px; }
    .hero-text { font-size: 16px; }

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

    /* Services */
    .services-grid { flex-wrap: wrap; }
    .service-card { flex: 0 0 calc(50% - 15px); }

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

    /* Spacing */
    #about, #services { padding: 50px 0; }
    .section-title { font-size: 26px; margin-bottom: 30px; }
}

Testing Tablet Styles

1. Open your browser and press F12 (or right-click → Inspect)
2. Click the device toolbar icon (or Ctrl+Shift+M)
3. Select a tablet preset (e.g., iPad) or set a custom width of 768px
4. Check each section looks correct at this width
5. Also test at 1024px (landscape tablet)

Key Takeaways

• Media queries apply CSS rules based on screen width conditions
• Use flex-direction: column to convert side-by-side layouts to stacked
• calc() lets you calculate precise widths accounting for gaps
• Reduce font sizes, padding, and spacing proportionally for smaller screens
• Test with browser DevTools device toolbar for accurate previews