CSS Responsive Design Mobile First Approach

What is Responsive Design?

Responsive design makes a page adapt to different screen sizes, input methods, and reading conditions. A responsive page should not simply shrink; it should reorganize content so it remains readable and usable.

The best responsive layouts combine fluid sizing, flexible media, modern layout tools, and focused media queries. Mobile-first CSS starts with the smallest practical layout, then adds complexity as more space becomes available.

Responsive Web Design (RWD) makes websites look and work well on all screen sizes - from mobile phones to large desktop monitors. It uses three core techniques:

A good responsive page avoids horizontal scrolling, oversized text blocks, tiny tap targets, clipped popups, and images that overflow their containers.

Fluid layouts - use percentages and relative units instead of fixed pixels
Flexible images - images scale within their containers
Media queries - apply different styles at different screen sizes

Viewport Meta Tag

Always include the viewport meta tag in your HTML <head>. Without it, mobile browsers render the page at desktop width and scale it down.

Viewport Meta Tag and Fluid Layouts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Viewport meta tag - REQUIRED for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
</body>
</html>

Viewport Meta Tag - CSS Example

/* Fluid layout - use relative units */
.container {
    width: 90%;          /* 90% of viewport */
    max-width: 1200px;   /* but never wider than 1200px */
    margin: 0 auto;      /* center horizontally */
}

/* Fluid images */
img {
    max-width: 100%;     /* never wider than container */
    height: auto;        /* maintain aspect ratio */
}

/* Fluid typography */
html { font-size: 16px; }
h1   { font-size: clamp(1.5rem, 4vw, 3rem); } /* min, preferred, max */
p    { font-size: clamp(1rem, 2vw, 1.2rem); }

/* Fluid spacing */
.section {
    padding: clamp(20px, 5vw, 80px);
}

Media Queries

Media queries apply CSS rules only when certain conditions are met - typically screen width. Use mobile-first approach: write base styles for mobile, then add styles for larger screens.

Media Queries - Mobile-First Approach

/* ===== MOBILE FIRST ===== */
/* Base styles - for all screens (mobile) */
.nav { display: none; }          /* hide nav on mobile */
.hamburger { display: block; }   /* show hamburger on mobile */
.grid { grid-template-columns: 1fr; } /* single column */
.sidebar { display: none; }

/* Small tablets - 576px and up */
@media (min-width: 576px) {
    .container { max-width: 540px; }
}

/* Tablets - 768px and up */
@media (min-width: 768px) {
    .container { max-width: 720px; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .nav { display: flex; }
    .hamburger { display: none; }
}

/* Desktops - 992px and up */
@media (min-width: 992px) {
    .container { max-width: 960px; }
    .grid { grid-template-columns: repeat(3, 1fr); }
    .sidebar { display: block; }
    .layout {
        display: grid;
        grid-template-columns: 250px 1fr;
    }
}

/* Large desktops - 1200px and up */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
    .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== OTHER MEDIA FEATURES ===== */

/* Orientation */
@media (orientation: landscape) {
    .hero { min-height: 70vh; }
}
@media (orientation: portrait) {
    .hero { min-height: 50vh; }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a2e; color: #eee; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .navbar, .sidebar, .ads { display: none; }
    body { font-size: 12pt; color: black; }
    a::after { content: " (" attr(href) ")"; }
}

Responsive Patterns

Responsive Navigation and card Grid

/* Responsive navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        padding: 20px;
    }
    .nav-links.open { display: flex; }
}

/* Auto-responsive card grid - no media queries needed! */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
/* Cards automatically wrap based on available space */

/* Responsive table */
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr { display: block; }
    thead tr { display: none; }  /* hide headers */
    td::before {
        content: attr(data-label) ": ";
        font-weight: bold;
    }
}