wp-responsive

Responsive Design Patterns

This skill defines the responsive design system used across all themes and demos. It uses mobile-first CSS with min-width media queries, fluid typography, and responsive image techniques.

Mobile-First Breakpoint System

All styles are written mobile-first. Base styles target the smallest screens, and min-width media queries progressively enhance for larger viewports.

Breakpoint Scale

CSS Implementation

/* Base: mobile-first (no media query) */
.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* Small (576px+): 2 columns */
@media (min-width: 576px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet (768px+): still 2 columns, wider gap */
@media (min-width: 768px) {
    .services__grid {
        gap: var(--spacing-xl);
    }
}

/* Desktop (1024px+): 3 columns */
@media (min-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large (1200px+): wider gap */
@media (min-width: 1200px) {
    .services__grid {
        gap: var(--spacing-2xl);
    }
}

Rule: Always min-width, Never max-width

Use min-width queries exclusively. This enforces mobile-first thinking -- you start with the constrained layout and add complexity as space increases.

/* CORRECT: mobile-first with min-width */
@media (min-width: 768px) { ... }

/* WRONG: desktop-first with max-width */
@media (max-width: 767px) { ... }

The only exception to the max-width rule is for the hamburger/mobile menu toggle (see Navigation section below), where max-width can be used to hide desktop nav on mobile. Even then, prefer showing/hiding with min-width when possible.