Back to Portfolio

Resources

Responsive Design
Code

Responsive Design Patterns

Common responsive design patterns with code examples and implementation guidelines.

Common Responsive Design Patterns

Mostly Fluid

Columns are sized as percentages and scale down on smaller screens. One column may have a fixed width.

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.column {
    width: 33.33%;
    float: left;
}

@media (max-width: 768px) {
    .column {
        width: 100%;
        float: none;
    }
}

Column Drop

Columns stack vertically on smaller screens, dropping from multi-column to single-column layout.

.container {
    display: flex;
    flex-wrap: wrap;
}

.column {
    flex: 1 1 300px;
    min-width: 300px;
}

@media (max-width: 600px) {
    .column {
        flex: 1 1 100%;
    }
}

Layout Shifter

Layout changes significantly across breakpoints, with content reordering for optimal viewing.

/* Mobile First */
.content {
    order: 2;
}

.sidebar {
    order: 1;
}

@media (min-width: 768px) {
    .content {
        order: 1;
        width: 70%;
    }

    .sidebar {
        order: 2;
        width: 30%;
    }
}

Tiny Tweaks

Minor changes to font size, spacing, or image size to adapt to different screen sizes.

h1 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }

    p {
        font-size: 1.125rem;
    }
}

Off Canvas

Navigation or content is hidden off-screen and revealed when needed, commonly used for mobile menus.

.sidebar {
    position: fixed;
    left: -300px;
    width: 300px;
    transition: left 0.3s;
}

.sidebar.open {
    left: 0;
}

@media (min-width: 768px) {
    .sidebar {
        position: static;
        left: auto;
    }
}

Grid Layout

Using CSS Grid for responsive layouts that automatically adapt to available space.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.grid-item {
    /* Items automatically adjust */
}

Responsive Images

Images that adapt to different screen sizes and resolutions.

/* Using srcset */
Description

/* Using picture element */

    
    
    Description

Responsive Navigation

Navigation that adapts from horizontal menu to hamburger menu on smaller screens.

/* Desktop Navigation */
.nav {
    display: flex;
}

.nav-item {
    display: inline-block;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav {
        display: none;
        flex-direction: column;
    }

    .nav.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }
}

Common Breakpoints

Mobile

320px - 767px

Tablet

768px - 1023px

Desktop

1024px - 1439px

Large Desktop

1440px+