Your website needs to work perfectly on a 320px phone and a 2560px monitor. And every size in between.
Responsive design isn’t optional anymore. Over 60% of web traffic comes from mobile devices. If your site doesn’t adapt to different screen sizes, you’re losing more than half your potential audience.
But responsive design is more than just “making things smaller.” It’s about creating flexible layouts that maintain usability and visual hierarchy regardless of screen size. It’s about making strategic decisions about what to show, how to organize it, and how users interact with it.
This tutorial gives you the practical knowledge to build truly responsive websites. We’ll cover fluid grids, smart breakpoints, flexible images, and modern CSS techniques that make responsive design easier than ever.
TL;DR: Responsive Design Essentials
- Mobile-first approach – Design for small screens first, enhance for larger
- Fluid grids use percentages – Not fixed pixels, so layouts scale naturally
- Breakpoints based on content – Not device sizes, add breaks where design needs them
- Flexible images scale – Use max-width: 100% to prevent overflow
- CSS Grid and Flexbox – Modern layout tools built for responsive design
- Touch targets need 44x44px minimum – Fingers are bigger than mouse cursors
- Test on real devices – Emulators don’t show real-world issues
- Performance matters more on mobile – Slow connections and limited processing power
What Is Responsive Web Design?
Responsive web design (RWD) is an approach where design adapts to the user’s device and viewport size. One website, one codebase, but different layouts for different screens.
Coined by Ethan Marcotte in 2010, responsive design has three core components:
Fluid grids – Layouts use relative units (percentages, ems) instead of fixed pixels Flexible images – Images scale within their containers Media queries – CSS rules that apply only at certain viewport sizes
These three ingredients let you create layouts that work everywhere.
Responsive vs Adaptive vs Mobile-Only
Responsive design uses fluid layouts that continuously adapt. As you resize the browser, the layout adjusts smoothly.
Adaptive design uses fixed layouts at specific sizes. The site “snaps” between layouts at defined breakpoints but doesn’t scale fluidly between them.
Mobile-only sites (like m.example.com) are separate sites for mobile users. This approach is outdated. Managing two codebases is expensive, and users lose data when switching between mobile and desktop.
Responsive is the modern standard. One site, all devices.
Why Responsive Design Matters
User behavior has shifted. People browse on phones during commutes, tablets on couches, and desktops at work. They might start a task on one device and finish on another.
Google prioritizes mobile. Since 2019, Google uses mobile-first indexing. They primarily use the mobile version of your site for ranking and indexing.
Performance impacts business. Mobile users on slow connections need fast-loading sites. Responsive design done well improves performance.
Maintenance is easier. One responsive site is cheaper and simpler to maintain than multiple device-specific sites.
Future-proofing. New devices with new screen sizes appear constantly. Responsive design adapts automatically.
Mobile-First Philosophy
Mobile-first means designing for the smallest screens first, then enhancing for larger screens. This isn’t just about order. It’s about priorities.
Why Mobile-First Works
Forces prioritization. Small screens can’t fit everything. You must decide what’s truly essential. This discipline improves your design even on desktop.
Performance by default. Starting small means starting lean. You add complexity for larger screens rather than struggling to remove it for mobile.
Progressive enhancement. Basic functionality works everywhere. Enhanced features appear on devices that can handle them.
Reflects reality. Most traffic is mobile. Design for your majority audience first.
Mobile-First CSS Structure
In mobile-first CSS, your base styles target mobile. Media queries add complexity for larger screens:
/* Base styles for mobile */
.container {
width: 100%;
padding: 16px;
}
.sidebar {
display: none; /* Hidden on mobile */
}
/* Tablet and larger */
@media (min-width: 768px) {
.container {
padding: 32px;
}
.sidebar {
display: block; /* Show sidebar on larger screens */
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
This approach loads mobile styles for everyone, then adds desktop complexity only for users who need it.
Desktop-First Problems
Desktop-first reverses this. You design for large screens, then use max-width media queries to handle smaller screens:
/* Desktop styles for everyone */
.container {
width: 1200px;
margin: 0 auto;
}
/* Tablet */
@media (max-width: 1023px) {
.container {
width: 100%;
}
}
/* Mobile */
@media (max-width: 767px) {
.container {
padding: 16px;
}
}
The problem? Mobile users download all the desktop CSS even though most doesn’t apply. They get the slowest experience despite needing the fastest.
Desktop-first also encourages “cramming” layouts onto mobile rather than truly reconsidering the design for small screens.
Fluid Grids: Flexible Layouts
Fluid grids are layouts that use relative units instead of fixed pixels. They scale proportionally as the viewport changes.
The Math of Fluid Grids
The original formula for fluid layouts:
target ÷ context = result
If you want an element to be 320px wide in a 960px container: 320 ÷ 960 = 0.3333 = 33.33%
This math lets you convert any fixed-width design into a fluid one.
But modern CSS makes this easier. You rarely need to calculate percentages manually anymore.
CSS Grid for Responsive Layouts
CSS Grid is built for responsive design. It creates two-dimensional layouts with rows and columns that adapt automatically.
Basic responsive grid:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
This creates a grid where:
- Columns are at least 250px wide
- Columns grow to fill available space (1fr)
- Columns automatically wrap to new rows as needed
- No media queries required!
auto-fit removes empty columns. auto-fill keeps them. Use auto-fit for most cases.
More control with media queries:
.grid {
display: grid;
grid-template-columns: 1fr; /* Mobile: single column */
gap: 16px;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* Tablet: two columns */
gap: 24px;
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* Desktop: three columns */
gap: 32px;
}
}
Flexbox for Responsive Components
Flexbox excels at one-dimensional layouts (rows or columns) and component-level responsiveness.
Responsive navigation:
.nav {
display: flex;
flex-direction: column; /* Stack on mobile */
gap: 8px;
}
@media (min-width: 768px) {
.nav {
flex-direction: row; /* Horizontal on larger screens */
gap: 24px;
}
}
Flexible cards:
.card-container {
display: flex;
flex-wrap: wrap; /* Wrap to new rows as needed */
gap: 24px;
}
.card {
flex: 1 1 300px; /* Grow, shrink, basis 300px */
/* Cards will wrap when they can't fit at 300px+ */
}
The flex property is shorthand:
- flex-grow: Can this item grow? (1 = yes)
- flex-shrink: Can this item shrink? (1 = yes)
- flex-basis: Starting size (300px)
The 12-Column Grid System
The 12-column grid is a common framework because 12 divides evenly many ways (halves, thirds, quarters, sixths).
You can build this with CSS Grid:
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.col-12 { grid-column: span 12; } /* Full width */
.col-6 { grid-column: span 6; } /* Half width */
.col-4 { grid-column: span 4; } /* Third width */
.col-3 { grid-column: span 3; } /* Quarter width */
Elements span however many columns you need. On mobile, typically everything spans 12 columns (full width). On larger screens, you adjust the spans.
Container Queries: The Future
Container queries (now supported in modern browsers) let elements respond to their container’s size, not the viewport.
.card-container {
container-type: inline-size;
}
.card {
padding: 16px;
}
@container (min-width: 400px) {
.card {
padding: 32px;
display: grid;
grid-template-columns: auto 1fr;
}
}
The card changes layout based on the container’s width, not the viewport. This makes truly reusable components that adapt to any context.
Container queries are powerful but still gaining browser support. Check compatibility before using in production.
Breakpoints: When and Where to Change
Breakpoints are viewport widths where your layout changes. Choosing good breakpoints is critical for responsive design.
Content-Based Breakpoints
The best breakpoints are determined by your content, not by device sizes.
The process:
- Start with your mobile layout
- Slowly expand the viewport width
- When the layout starts to look awkward, that’s a breakpoint
- Add a media query and adjust the layout
- Continue expanding and repeat
This ensures breakpoints serve your design rather than targeting arbitrary device widths.
Common Breakpoint Ranges
That said, these ranges cover most devices and serve as reasonable starting points:
Small (mobile): 320px – 767px Medium (tablet): 768px – 1023px
Large (desktop): 1024px – 1439px Extra large (wide desktop): 1440px+
Your specific breakpoints will vary. Many sites use just two or three breakpoints. Complex sites might have five or more.
Writing Breakpoint Media Queries
Mobile-first (min-width):
/* Mobile base styles */
.element { /* ... */ }
/* Tablet and up */
@media (min-width: 768px) {
.element { /* ... */ }
}
/* Desktop and up */
@media (min-width: 1024px) {
.element { /* ... */ }
}
Desktop-first (max-width):
/* Desktop base styles */
.element { /* ... */ }
/* Tablet and down */
@media (max-width: 1023px) {
.element { /* ... */ }
}
/* Mobile and down */
@media (max-width: 767px) {
.element { /* ... */ }
}
Range queries (between sizes):
/* Only apply between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
.element { /* ... */ }
}
Avoiding Too Many Breakpoints
More breakpoints means more complexity and maintenance. Start with 2-3 breakpoints. Add more only if necessary.
A flexible grid system with good use of relative units often eliminates the need for many breakpoints. The layout adapts naturally without explicit media queries.
Testing Between Breakpoints
Don’t just test at your exact breakpoint widths. Test at sizes between them too. Your layout should look good at every width, not just at specific breakpoints.
This is where fluid grids shine. Fixed layouts look good only at specific widths. Fluid layouts look good everywhere.
Flexible Images and Media
Images and videos need to scale with their containers. Fixed-width media breaks responsive layouts.
The Basic Technique
The simplest solution works for most cases:
img {
max-width: 100%;
height: auto;
}
This makes images scale down to fit their container but never scale up beyond their natural size. The height adjusts proportionally.
Apply this globally or to specific classes. It’s the foundation of responsive images.
Object-Fit for Control
The object-fit property controls how images fill their containers:
.hero-image {
width: 100%;
height: 400px;
object-fit: cover; /* Crops to fill container */
}
object-fit values:
- contain: Entire image visible, may have letterboxing
- cover: Fills container, may crop image
- fill: Stretches to fill (can distort)
- none: Original size (may overflow)
- scale-down: Smaller of contain or none
cover is most common for hero images and thumbnails where you want consistent sizing.
Responsive Background Images
Background images need different treatment:
.hero {
background-image: url('hero-mobile.jpg');
background-size: cover;
background-position: center;
height: 300px;
}
@media (min-width: 768px) {
.hero {
background-image: url('hero-desktop.jpg');
height: 500px;
}
}
This loads different images at different sizes. Mobile users get smaller images, saving bandwidth.
Picture Element for Art Direction
The picture element lets you specify different images for different contexts:
<picture>
<source media="(min-width: 1024px)" srcset="wide.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Description">
</picture>
The browser loads only the appropriate image. This is “art direction” – using different crops or compositions at different sizes, not just scaling.
Use picture when you want to show different versions of an image (like a landscape crop on desktop and portrait on mobile).
Srcset for Resolution Switching
The srcset attribute handles different resolutions without different compositions:
<img src="image-400w.jpg"
srcset="image-400w.jpg 400w,
image-800w.jpg 800w,
image-1200w.jpg 1200w"
sizes="(min-width: 1024px) 800px,
(min-width: 768px) 600px,
100vw"
alt="Description">
The browser picks the best image based on viewport size and device pixel density. Retina displays get high-res images. Regular displays get standard resolution.
This saves bandwidth while ensuring images look sharp everywhere.
Video Responsiveness
Videos need aspect ratio preservation:
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The padding-bottom percentage maintains aspect ratio. 56.25% is 16:9 (9/16 = 0.5625). Use 75% for 4:3, 100% for 1:1 (square).
Modern CSS supports aspect-ratio directly:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container video {
width: 100%;
height: 100%;
}
Much simpler, but check browser support for your audience.
Typography in Responsive Design
Text needs to scale and remain readable across all screen sizes.
Responsive Font Sizes
Mobile-first scaling:
body {
font-size: 16px; /* Mobile base */
}
@media (min-width: 768px) {
body {
font-size: 18px; /* Larger on tablet */
}
}
@media (min-width: 1024px) {
body {
font-size: 20px; /* Even larger on desktop */
}
}
Fluid typography with clamp:
body {
/* Min 16px, preferred 1vw + 14px, max 22px */
font-size: clamp(16px, 1vw + 14px, 22px);
}
h1 {
/* Scales smoothly between 32px and 64px */
font-size: clamp(32px, 5vw, 64px);
}
The clamp() function sets minimum, preferred, and maximum values. Font size scales smoothly between the min and max based on the preferred calculation.
Viewport Units
Viewport units scale with screen size:
- vw: 1% of viewport width
- vh: 1% of viewport height
- vmin: 1% of smaller dimension
- vmax: 1% of larger dimension
Use cautiously. Text sized purely in viewport units can become unreadably small or enormous.
Combine with clamp() for controlled scaling:
h1 {
font-size: clamp(2rem, 4vw, 5rem);
}
Line Length Considerations
Maintain optimal line length (50-75 characters) across screen sizes:
.content {
max-width: 65ch; /* 65 characters wide */
margin: 0 auto;
padding: 0 20px;
}
The ch unit is based on the width of the “0” character in the current font. It’s perfect for controlling line length.
On very wide screens, don’t let text stretch full-width. Use max-width to maintain readability.
Navigation Patterns for Responsive Design
Navigation is one of the hardest responsive design challenges. Desktop has space for full menus. Mobile doesn’t.
Hamburger Menu
The hamburger icon (≡) is the most common mobile navigation pattern. It hides navigation behind a button.
Basic implementation:
.nav-toggle {
display: block; /* Show on mobile */
}
.nav-menu {
display: none; /* Hidden by default */
}
.nav-menu.active {
display: block; /* Show when toggled */
}
@media (min-width: 768px) {
.nav-toggle {
display: none; /* Hide button on desktop */
}
.nav-menu {
display: flex; /* Always show on desktop */
}
}
JavaScript toggles the active class when users tap the hamburger.
Pros: Saves space, universally recognized Cons: Hides navigation, requires extra interaction
Priority+ Navigation
Shows important items, hides less important items in a “More” menu:
Logo | Item1 | Item2 | Item3 | More ▼
On mobile, more items move into the “More” menu.
Pros: Shows most important items immediately Cons: Requires JavaScript to detect overflow and move items
Tab Bar (Bottom Navigation)
Mobile apps often use bottom navigation with 3-5 tabs. This works for web apps too:
.tab-bar {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
@media (min-width: 768px) {
.tab-bar {
position: static; /* Normal flow on desktop */
}
}
Pros: Easy thumb access, always visible Cons: Takes up screen space, limited to few items
Off-Canvas Menu
Navigation slides in from the side, covering or pushing main content:
Pros: Can show more complex menus, smooth animation Cons: Requires JavaScript, can feel heavy
Choose the pattern that fits your site structure and user needs. Test with real users to see what works.
Touch Considerations
Mobile users tap with fingers, not click with precise mouse cursors. This changes interaction design.
Minimum Touch Target Size
WCAG 2.2 requires minimum 24x24px target size. Apple’s Human Interface Guidelines recommend 44x44px. Android recommends 48x48px.
Use the largest you can accommodate:
.button {
min-width: 44px;
min-height: 44px;
padding: 12px 24px; /* Internal padding adds to size */
}
Small text links need padding to reach minimum size:
.link {
display: inline-block;
padding: 12px 8px; /* Creates adequate touch area */
}
Spacing Between Targets
Targets close together cause mis-taps. Add spacing:
.button-group {
display: flex;
gap: 16px; /* Prevents accidental adjacent taps */
}
WCAG 2.2 Level AAA requires 24px spacing between targets.
Hover States Don’t Exist
Mobile has no hover. Don’t hide critical information or controls in hover states.
Use focus states for keyboard navigation and active states for touch feedback:
.button:hover,
.button:focus {
background: blue; /* Both hover and focus get same treatment */
}
.button:active {
transform: scale(0.98); /* Tap feedback */
}
Prevent Accidental Zooming
Double-tap to zoom can interfere with buttons. Prevent this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But be cautious. Preventing zoom harms accessibility. Only do this if you have a good reason and your text is adequately sized.
Better: Use touch-action CSS property to prevent specific gestures on specific elements:
.button {
touch-action: manipulation; /* Removes double-tap-to-zoom delay */
}
Performance for Responsive Design
Responsive design must be fast. Mobile users often have slow connections.
Mobile Performance Priorities
Reduce payload. Smaller files load faster. Compress images, minify code, remove unused CSS/JavaScript.
Load critical content first. Above-the-fold content should load immediately. Defer everything else.
Respect connection speed. Don’t auto-play videos on cellular. Don’t load huge images on slow connections.
Image Optimization
Images are usually the largest files. Optimize aggressively:
- Compress with tools like ImageOptim or Squoosh
- Use modern formats (WebP, AVIF) with JPEG fallbacks
- Implement lazy loading for below-the-fold images
- Use srcset to serve appropriate sizes
- Consider using CDN with automatic optimization
Lazy Loading
Load images only when they’re about to enter the viewport:
<img src="image.jpg" loading="lazy" alt="Description">
The loading attribute handles lazy loading natively. No JavaScript needed.
For more control, use Intersection Observer API or libraries like lazysizes.
Critical CSS
Inline critical CSS (styles needed for above-the-fold content) in the HTML head. Load remaining CSS asynchronously:
<style>
/* Critical CSS inline here */
.header { /* ... */ }
.hero { /* ... */ }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
This makes initial render instant while full styles load in background.
Reducing JavaScript
JavaScript is expensive on mobile. It must be downloaded, parsed, compiled, and executed. All of this blocks rendering.
- Remove unused libraries
- Code-split and load only needed JavaScript per page
- Defer non-critical scripts
- Use lighter alternatives (vanilla JS instead of jQuery, etc.)
Testing Responsive Designs
Build in one browser, test in many. Responsive design must work everywhere.
Browser DevTools
Every modern browser has responsive design mode:
- Chrome/Edge: F12 → Device Toolbar
- Firefox: F12 → Responsive Design Mode
- Safari: Develop menu → Enter Responsive Design Mode
These let you test different viewport sizes quickly. But they’re emulators, not real devices.
Real Device Testing
Nothing replaces testing on actual phones and tablets. Emulators can’t show:
- Real touch interactions
- Actual performance on mobile processors
- OS-specific rendering quirks
- Real-world connection speeds
Maintain a device testing library with common devices. At minimum, test on:
- iPhone (latest + one version back)
- Android phone (Samsung or Pixel)
- iPad or Android tablet
- Old/slow device (shows performance issues)
Testing Services
Can’t afford many devices? Use testing services:
- BrowserStack: Test on real devices in the cloud
- Sauce Labs: Automated and manual testing on devices
- LambdaTest: Cross-browser and device testing
These services are expensive but cheaper than buying dozens of devices.
Viewport Width Testing
Test at many widths, not just your breakpoints:
- 320px (small phones)
- 375px (iPhone standard)
- 414px (iPhone Plus sizes)
- 768px (tablet portrait)
- 1024px (tablet landscape, small laptop)
- 1366px (common laptop)
- 1920px (Full HD desktop)
- 2560px+ (wide monitors)
Also test between breakpoints. Your layout should look good at every width.
Accessibility Testing
Responsive design must remain accessible:
- Test keyboard navigation at all sizes
- Verify touch targets meet minimum sizes
- Check that content reflows at 200% zoom
- Test with screen readers on mobile
- Verify color contrast at all breakpoints
Common Responsive Design Mistakes
Even experienced developers make these errors. Avoid them.
Mistake 1: Forgetting About Landscape
Mobile devices rotate. Your design must work in both portrait and landscape orientations.
Test all mobile layouts in landscape mode. Sometimes layouts that work in portrait break when rotated.
Mistake 2: Hiding Content on Mobile
Just because space is limited doesn’t mean users want less information. Hiding content on mobile because “users don’t need it on mobile” is usually wrong.
Users on mobile are doing the same tasks as desktop users. They need the same information. Find ways to present it appropriately rather than removing it.
Mistake 3: Not Testing on Real Devices
Emulators lie. They don’t show real performance, real touch interactions, or real rendering.
Always test on actual devices before launching.
Mistake 4: Ignoring Touch Targets
44x44px minimum is not negotiable. Smaller targets frustrate users and cause errors.
Mistake 5: Using Pixel-Perfect Measurements
Rigid pixel measurements break responsive design. Use relative units (%, em, rem, vw, vh) for flexibility.
Mistake 6: Too Many Breakpoints
Every breakpoint adds complexity. Start with 2-3. Add more only if necessary.
Mistake 7: Desktop-First Thinking
Mobile users download all your desktop CSS even if they can’t use it. Mobile-first is more efficient.
Mistake 8: Forgetting Performance
Beautiful responsive design that loads slowly is useless. Prioritize performance, especially on mobile.
Conclusion
Responsive design is the only design. In a world of infinite device sizes, your website must adapt to all of them.
Key takeaways:
- Mobile-first approach starts small and enhances for larger screens
- Fluid grids use relative units to scale naturally
- Breakpoints should be based on your content, not device sizes
- Flexible images use max-width: 100% to prevent overflow
- CSS Grid and Flexbox are built for responsive layouts
- Touch targets need minimum 44x44px for usability
- Performance matters most on mobile with slow connections
- Test on real devices to catch issues emulators miss
- Container queries enable truly component-based responsive design
The action you should take today: Audit your site on a real phone. Can you easily tap buttons? Is text readable? Does the layout make sense? If not, start making it mobile-friendly before worrying about desktop polish.
Responsive design is no longer optional. It’s the foundation of modern web development. Master these techniques, and you’ll build sites that work beautifully everywhere.
Ready to ensure your responsive designs work for everyone? Check out our guide on Web Accessibility Checklist: How to Meet WCAG 2.2 Standards, where we cover how to make responsive designs accessible to users with disabilities.
Quick Reference: Responsive Design Checklist
Use this for every responsive project:
- Mobile-first CSS structure – Base styles for mobile, media queries enhance
- Fluid grid system – CSS Grid or Flexbox with relative units
- Flexible images – max-width: 100% at minimum
- Content-based breakpoints – Not arbitrary device sizes
- Touch targets 44x44px minimum – Adequate spacing between targets
- Readable text at all sizes – 16px minimum, proper line height
- Optimized images – Compressed, appropriately sized for viewport
- Performance budget – Fast load times, especially on mobile
- Test on real devices – Emulators aren’t enough
- Accessible at all sizes – Keyboard navigation, proper focus states
Frequently Asked Questions
What are the standard responsive design breakpoints? There are no universal standards, but common starting points are 768px (tablet) and 1024px (desktop). Base breakpoints on your content needs rather than specific devices.
Should I design mobile-first or desktop-first? Mobile-first is recommended. Design for small screens first, then enhance for larger screens. This ensures good mobile experience and better performance.
What is the difference between responsive and adaptive design? Responsive design uses fluid layouts that scale continuously. Adaptive design uses fixed layouts at specific sizes. Responsive is more flexible and modern.
How do I make images responsive? Use max-width: 100%; height: auto; as a base. For more control, use srcset for different resolutions and the picture element for art direction.
What is a fluid grid? A fluid grid uses relative units (percentages, fr units) instead of fixed pixels. It scales proportionally as viewport size changes.
How many breakpoints should I use? Start with 2-3 breakpoints. Add more only if your design requires them. More breakpoints mean more complexity and maintenance.
References & Further Reading
- “Responsive Web Design” – Marcotte, E. (2010)
- Web Content Accessibility Guidelines (WCAG) 2.2 – W3C
- “Mobile First” – Wroblewski, L. (2011)
- MDN Web Docs: Responsive Design
- CSS Grid Layout Guide – MDN
- A Complete Guide to Flexbox – CSS-Tricks
- Google Mobile-First Indexing Documentation