Luca Berton
design

Responsive Design Snippets: A Developer's Cheat Sheet

Luca Berton •
#responsive#google#udacity#nanodegree

Introduction

Responsive design ensures your website works on any screen—mobile, tablet, or desktop. This post is a collection of practical CSS patterns and layout techniques used in modern front-end development. Save it as your cheat sheet for building responsive, flexible, and accessible interfaces.

1. Viewport Meta Tag

Defines the width and zoom level of the viewport to match the device’s screen size:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Relative and Scalable Sizing

Use fluid units (%, max-width) for elements to scale naturally across screen sizes:

.logo { width: 100px; }        /* Fixed width logo */
.box { width: 100%; }          /* Fills the full container width */
.hero { max-width: 100%; }     /* Scales down but never overflows */

3. Touch-Friendly Targets

Ensure touch targets like buttons or links are easy to tap on mobile devices:

nav, a, button {
  min-width: 48px;
  min-height: 48px;
}

Use padding for touch areas when you need variable sizing:

nav, a, button {
  padding: 1.5em;
}

4. Media Queries

Load different stylesheets for different screen widths:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen and (min-width: 500px)" href="over500.css">

Embedded media query within a <style> block:

@media screen and (min-width: 500px) {
  body { background-color: green; }
}

Avoid @import for performance, though it’s valid CSS:

@import url("over500.css") only screen and (min-width: 500px);

Use breakpoints to apply styles based on screen size:

body { background-color: green; }

@media (max-width: 400px) {
  body { background-color: red; }
}

@media (min-width: 600px) {
  body { background-color: blue; }
}

5. Flexbox: Fluid Layouts Made Easy

Use flexbox to build flexible layouts that adjust naturally as screen sizes change.

Enable a basic flex layout:

.container {
  display: flex;
  width: 100%;
}
.box { width: 150px; }

Prevent shrinking and wrap elements to new rows:

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

Reorder items visually without changing HTML order:

.red { order: 1; }
.green { order: 2; }

Complete responsive flex example with order control:

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 100%;
  height: 100px;
  text-align: center;
}
.one { width: 100%; order: 1; }
.two { width: 50%; order: 2; }
.three { width: 50%; order: 3; }

6. Common Responsive Layout Patterns

Column Drop

Stacks columns vertically on smaller screens, and repositions them horizontally on larger screens:

.container { display: flex; flex-wrap: wrap; }
.box { width: 100%; }

@media (min-width: 450px) {
  .dark_blue { width: 25%; }
  .light_blue { width: 75%; }
}
@media (min-width: 550px) {
  .dark_blue, .green { width: 25%; }
}

Mostly Fluid

Columns start stacked and gradually distribute fluidly across larger screen widths:

@media (min-width: 450px) {
  .light_blue, .green { width: 50%; }
}
@media (min-width: 550px) {
  .dark_blue, .light_blue { width: 50%; }
  .green, .red, .orange { width: 33.33%; }
}
@media (min-width: 700px) {
  .container {
    width: 700px;
    margin: 0 auto;
  }
}

Layout Shifter

Shifts and reorders content blocks at larger breakpoints to emphasize priority content:

@media (min-width: 600px) {
  .dark_blue { width: 25%; order: 1; }
  .red { width: 25%; order: -1; }
  #container2 { width: 50%; }
}

Off-Canvas Menu

Slides in from the side on mobile, while showing inline on desktop:

nav {
  transform: translate(-300px, 0);
  transition: transform 0.3s ease;
}
nav.open {
  transform: translate(0, 0);
}
menu.addEventListener('click', function(e) {
  drawer.classList.toggle('open');
  e.stopPropagation();
});

7. Responsive Tables

Hide low-priority columns on wider screens:

@media (min-width: 600px){
  .inning { display: none; }
}

Reformat tables into blocks for mobile views:

@media (max-width: 500px){
  table, thead, tbody, th, td, tr {
    display: block;
  }
  td:before {
    content: attr(data-th);
    font-weight: bold;
  }
}

Make tables scrollable on small devices:

.contained_table {
  width: 100%;
  overflow-x: auto;
}

8. Typography

Use scalable font sizes with appropriate line-height for legibility:

.smallFonts { font-size: 14px; line-height: 1.2; }
.goodFonts { font-size: 16px; line-height: 1.2; }
.biggerFonts { font-size: 18px; line-height: 1.25; }

9. Responsive Images

Two or three images side-by-side with margins:

img {
  width: 50%;
  margin-right: 10px;
}
img:last-of-type {
  margin-right: 0;
}

Responsive images with srcset and sizes:

<img
  src="images/great_pic_800.jpg"
  sizes="(max-width: 400px) 100vw, (min-width: 401px) 50vw"
  srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w"
  alt="great picture">

Reacting to pixel density (retina screens):

<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x">

Fallback with <picture>:

<picture>
  <source media="(min-width: 1000px)" srcset="large.jpg">
  <source media="(min-width: 500px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive example">
</picture>

10. CSS Units for Viewports

Use viewport-based units to size elements responsively:

11. CSS Backgrounds

Complex background using gradients and layers:

body {
  background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%);
  background-color: #131313;
  background-size: 20px 20px;
}

Responsive background image using image-set:

div {
  background-image: image-set(
    url(images/icon1x.png) 1x,
    url(images/icon2x.png) 2x
  );
}

12. Miscellaneous

UTF-8 Meta Tag

Ensure proper character rendering:

<meta charset="UTF-8">

Icon fonts via Zocial:

@import url(http://weloveiconfonts.com/api/?family=zocial);

[class*="zocial-"]:before {
  font-family: 'zocial';
  font-size: 24px;
}

Inline images with base64:

<img src="data:image/svg+xml;base64,[data]">

More Resources

← Back to Blog