Table of Contents
- Introduction to Responsive Components
- Responsive Design Fundamentals
- Responsive Navigation Components
- Responsive Card Components
- Responsive Form Components
- Responsive Media Components
- Responsive Modal Components
- Responsive Table Components
- Responsive Grid Systems
- Responsive Typography
- Responsive Images and Icons
- Responsive Layout Patterns
- Practical Examples
- Best Practices
Introduction to Responsive Components
Responsive components are building blocks that adapt seamlessly to different screen sizes, devices, and orientations. They form the foundation of modern web design, ensuring consistent user experience across desktops, tablets, and mobile phones.
Why Responsive Components Matter
<!-- Without responsive design - breaks on mobile --> <div class="non-responsive"> <div style="width: 500px;">Fixed width content</div> <div style="font-size: 24px;">Fixed size text</div> </div> <!-- With responsive design - adapts to all screens --> <div class="responsive"> <div style="width: 100%; max-width: 500px;">Fluid width content</div> <div style="font-size: clamp(16px, 4vw, 24px);">Fluid text size</div> </div>
Responsive Design Principles
/* Core responsive principles */
.responsive-example {
/* Fluid layouts */
width: 100%;
max-width: 1200px;
margin: 0 auto;
/* Flexible images */
img {
max-width: 100%;
height: auto;
}
/* Media queries */
@media (max-width: 768px) {
padding: 1rem;
}
/* Relative units */
font-size: 1rem;
padding: 1em;
margin: 5vh 5vw;
}
Responsive Design Fundamentals
Viewport Meta Tag
<!DOCTYPE html> <html> <head> <!-- Essential for responsive design --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Additional options --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"> <!-- For specific device handling --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> </head>
Media Queries
/* Base styles (mobile first) */
.component {
width: 100%;
padding: 1rem;
font-size: 1rem;
}
/* Tablet (768px and up) */
@media (min-width: 768px) {
.component {
width: 750px;
margin: 0 auto;
padding: 1.5rem;
font-size: 1.125rem;
}
}
/* Desktop (1024px and up) */
@media (min-width: 1024px) {
.component {
width: 960px;
padding: 2rem;
font-size: 1.25rem;
}
}
/* Large desktop (1200px and up) */
@media (min-width: 1200px) {
.component {
width: 1140px;
}
}
/* Landscape orientation */
@media (orientation: landscape) {
.component {
flex-direction: row;
}
}
/* Portrait orientation */
@media (orientation: portrait) {
.component {
flex-direction: column;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.component {
background: #333;
color: #fff;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.component * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast */
@media (prefers-contrast: high) {
.component {
border: 2px solid currentColor;
}
}
Fluid Units and Calculations
/* Fluid typography with clamp */
.fluid-text {
font-size: clamp(1rem, 5vw, 3rem);
}
/* Fluid width with min/max */
.fluid-container {
width: min(90%, 1200px);
margin: 0 auto;
}
/* Responsive padding */
.fluid-padding {
padding: clamp(1rem, 3vw, 3rem);
}
/* Viewport-based sizing */
.viewport-sizing {
height: 100vh; /* Full viewport height */
width: 100vw; /* Full viewport width */
padding: 5vh 5vw; /* Responsive padding */
}
/* Container queries (modern) */
@container (max-width: 400px) {
.component {
flex-direction: column;
}
}
/* Complex calculations */
.complex-fluid {
width: calc(100% - 2rem);
margin: calc(1rem + 1vw);
font-size: calc(1rem + 0.5vw);
}
Responsive Navigation Components
Responsive Navbar
<nav class="responsive-nav"> <div class="nav-container"> <div class="nav-brand"> <a href="/"> <img src="logo.svg" alt="Logo" class="nav-logo"> <span class="nav-brand-name">Company</span> </a> </div> <button class="nav-toggle" aria-label="Toggle navigation"> <span></span> <span></span> <span></span> </button> <div class="nav-menu"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Services</a></li> <li class="nav-item"><a href="#" class="nav-link">Products</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> <div class="nav-actions"> <a href="#" class="nav-btn">Login</a> <a href="#" class="nav-btn nav-btn-primary">Sign Up</a> </div> </div> </div> </nav>
/* Responsive Navbar Styles */
.responsive-nav {
background: #333;
color: white;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
/* Brand */
.nav-brand a {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
text-decoration: none;
font-size: 1.25rem;
font-weight: bold;
}
.nav-logo {
height: 40px;
width: auto;
}
/* Menu */
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
}
.nav-link {
color: rgba(255,255,255,0.8);
text-decoration: none;
padding: 0.5rem;
transition: color 0.3s;
position: relative;
}
.nav-link:hover,
.nav-link.active {
color: white;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 2px;
background: #007bff;
}
/* Actions */
.nav-actions {
display: flex;
gap: 0.5rem;
}
.nav-btn {
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
color: white;
transition: all 0.3s;
}
.nav-btn-primary {
background: #007bff;
}
.nav-btn-primary:hover {
background: #0056b3;
}
/* Toggle button */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.nav-toggle span {
display: block;
width: 25px;
height: 3px;
background: white;
margin: 5px 0;
transition: all 0.3s;
}
/* Mobile styles */
@media (max-width: 768px) {
.nav-toggle {
display: block;
z-index: 1001;
}
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #333;
flex-direction: column;
padding: 1rem;
gap: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.nav-menu.show {
display: flex;
}
.nav-list {
flex-direction: column;
width: 100%;
text-align: center;
gap: 0.5rem;
}
.nav-actions {
width: 100%;
justify-content: center;
}
/* Animated toggle */
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
}
Responsive Mega Menu
<nav class="mega-menu"> <div class="mega-menu-container"> <div class="mega-menu-header"> <div class="mega-brand">MegaShop</div> <button class="mega-toggle">โฐ</button> </div> <div class="mega-menu-content"> <ul class="mega-nav"> <li class="mega-nav-item"> <a href="#" class="mega-nav-link">Electronics</a> <div class="mega-dropdown"> <div class="mega-dropdown-grid"> <div class="mega-category"> <h4>Computers</h4> <ul> <li><a href="#">Laptops</a></li> <li><a href="#">Desktops</a></li> <li><a href="#">Tablets</a></li> </ul> </div> <div class="mega-category"> <h4>Phones</h4> <ul> <li><a href="#">Smartphones</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Cases</a></li> </ul> </div> <div class="mega-category"> <h4>Audio</h4> <ul> <li><a href="#">Headphones</a></li> <li><a href="#">Speakers</a></li> <li><a href="#">Earbuds</a></li> </ul> </div> </div> </div> </li> <!-- More menu items --> </ul> </div> </div> </nav>
.mega-menu {
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
}
.mega-menu-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.mega-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.mega-brand {
font-size: 1.5rem;
font-weight: bold;
color: #333;
}
.mega-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.mega-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 2rem;
}
.mega-nav-item {
position: relative;
}
.mega-nav-link {
display: block;
padding: 1rem 0;
color: #333;
text-decoration: none;
font-weight: 500;
}
.mega-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 600px;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-radius: 4px;
padding: 2rem;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s;
z-index: 1000;
}
.mega-nav-item:hover .mega-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-dropdown-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.mega-category h4 {
color: #333;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #007bff;
}
.mega-category ul {
list-style: none;
padding: 0;
}
.mega-category li {
margin-bottom: 0.5rem;
}
.mega-category a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.mega-category a:hover {
color: #007bff;
}
/* Responsive */
@media (max-width: 1024px) {
.mega-dropdown {
min-width: 400px;
}
.mega-dropdown-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.mega-toggle {
display: block;
}
.mega-menu-content {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 1rem;
max-height: 80vh;
overflow-y: auto;
}
.mega-menu-content.show {
display: block;
}
.mega-nav {
flex-direction: column;
gap: 0;
}
.mega-nav-item {
border-bottom: 1px solid #eee;
}
.mega-nav-link {
padding: 1rem;
position: relative;
}
.mega-nav-link::after {
content: '+';
position: absolute;
right: 1rem;
}
.mega-dropdown {
position: static;
min-width: auto;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
padding: 1rem;
display: none;
}
.mega-nav-item.active .mega-dropdown {
display: block;
}
.mega-dropdown-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
Responsive Card Components
Flexible Card Grid
<div class="responsive-card-grid"> <!-- Basic Card --> <div class="responsive-card"> <img src="image1.jpg" alt="Card image" class="card-image"> <div class="card-content"> <h3 class="card-title">Card Title</h3> <p class="card-text">This card content will adapt to different screen sizes while maintaining readability.</p> <div class="card-meta"> <span class="card-date">May 15, 2024</span> <span class="card-author">By John Doe</span> </div> <button class="card-btn">Read More</button> </div> </div> <!-- Card with Actions --> <div class="responsive-card card-actions"> <img src="image2.jpg" alt="Card image" class="card-image"> <div class="card-content"> <h3 class="card-title">Product Name</h3> <p class="card-price">$49.99</p> <div class="card-rating">โ โ โ โ โ</div> <div class="card-actions"> <button class="card-btn btn-primary">Add to Cart</button> <button class="card-btn btn-outline">Wishlist</button> </div> </div> </div> <!-- Horizontal Card (on larger screens) --> <div class="responsive-card card-horizontal"> <img src="image3.jpg" alt="Card image" class="card-image"> <div class="card-content"> <h3 class="card-title">Horizontal Layout</h3> <p class="card-text">This card switches between horizontal and vertical layouts based on screen size.</p> <button class="card-btn">Learn More</button> </div> </div> </div>
/* Responsive Card Grid */
.responsive-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
/* Base Card */
.responsive-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.responsive-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* Card Image */
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s;
}
.responsive-card:hover .card-image {
transform: scale(1.05);
}
/* Card Content */
.card-content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.card-title {
font-size: clamp(1.125rem, 2vw, 1.25rem);
margin-bottom: 0.75rem;
color: #333;
line-height: 1.4;
}
.card-text {
font-size: clamp(0.875rem, 1.5vw, 1rem);
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
flex: 1;
}
.card-meta {
display: flex;
justify-content: space-between;
color: #999;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.card-price {
font-size: 1.5rem;
font-weight: bold;
color: #007bff;
margin-bottom: 0.5rem;
}
.card-rating {
color: #ffc107;
margin-bottom: 1rem;
}
.card-btn {
padding: 0.75rem 1.5rem;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s;
align-self: flex-start;
}
.card-btn:hover {
background: #0056b3;
}
/* Card with multiple actions */
.card-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.card-actions .card-btn {
flex: 1;
align-self: auto;
}
.btn-primary {
background: #007bff;
}
.btn-outline {
background: transparent;
border: 1px solid #007bff;
color: #007bff;
}
.btn-outline:hover {
background: #007bff;
color: white;
}
/* Horizontal Card */
.card-horizontal {
flex-direction: row;
}
.card-horizontal .card-image {
width: 30%;
height: auto;
}
.card-horizontal .card-content {
width: 70%;
}
/* Responsive Breakpoints */
@media (max-width: 768px) {
.responsive-card-grid {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
.card-horizontal {
flex-direction: column;
}
.card-horizontal .card-image {
width: 100%;
height: 200px;
}
.card-horizontal .card-content {
width: 100%;
}
.card-actions {
flex-direction: column;
}
.card-btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.card-meta {
flex-direction: column;
gap: 0.5rem;
}
.card-title {
font-size: 1rem;
}
.card-text {
font-size: 0.875rem;
}
}
Responsive Product Card
<div class="product-card-container"> <div class="product-card"> <div class="product-badge">Sale</div> <div class="product-image-wrapper"> <img src="product.jpg" alt="Product" class="product-image"> <div class="product-actions"> <button class="product-action">โค๏ธ</button> <button class="product-action">๐๏ธ</button> <button class="product-action">๐</button> </div> </div> <div class="product-details"> <h3 class="product-name">Wireless Headphones</h3> <p class="product-description">High-quality wireless headphones with noise cancellation</p> <div class="product-price"> <span class="current-price">$79.99</span> <span class="original-price">$129.99</span> </div> <div class="product-rating"> <span class="stars">โ โ โ โ โ</span> <span class="reviews">(128 reviews)</span> </div> <div class="product-variants"> <span class="variant-color" style="background: #000;"></span> <span class="variant-color" style="background: #fff;"></span> <span class="variant-color" style="background: #007bff;"></span> </div> <button class="product-add-to-cart">Add to Cart</button> </div> </div> </div>
.product-card-container {
max-width: 400px;
margin: 0 auto;
padding: 1rem;
}
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
position: relative;
}
.product-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: #dc3545;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: bold;
z-index: 1;
}
.product-image-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.product-card:hover .product-image {
transform: scale(1.1);
}
.product-actions {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
transition: bottom 0.3s;
}
.product-card:hover .product-actions {
bottom: 0;
}
.product-action {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
cursor: pointer;
transition: transform 0.3s, background 0.3s;
font-size: 1.25rem;
}
.product-action:hover {
transform: scale(1.1);
background: #007bff;
color: white;
}
.product-details {
padding: 1.5rem;
}
.product-name {
font-size: clamp(1.125rem, 2vw, 1.25rem);
margin-bottom: 0.5rem;
color: #333;
}
.product-description {
font-size: clamp(0.875rem, 1.5vw, 1rem);
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}
.product-price {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.current-price {
font-size: 1.5rem;
font-weight: bold;
color: #007bff;
}
.original-price {
color: #999;
text-decoration: line-through;
}
.product-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.stars {
color: #ffc107;
font-size: 1.125rem;
}
.reviews {
color: #666;
font-size: 0.875rem;
}
.product-variants {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.variant-color {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.3s;
}
.variant-color:hover {
transform: scale(1.1);
border-color: #007bff;
}
.product-add-to-cart {
width: 100%;
padding: 1rem;
background: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.product-add-to-cart:hover {
background: #0056b3;
}
/* Mobile styles */
@media (max-width: 480px) {
.product-card-container {
padding: 0.5rem;
}
.product-actions {
position: static;
background: none;
padding: 1rem 0 0;
}
.product-action {
background: #f0f0f0;
}
.product-details {
padding: 1rem;
}
.product-price {
flex-wrap: wrap;
}
.product-variants {
justify-content: center;
}
}
Responsive Form Components
Responsive Form Layouts
<div class="responsive-form-container"> <!-- Stacked Form (default) --> <form class="responsive-form"> <div class="form-group"> <label for="name" class="form-label">Full Name</label> <input type="text" id="name" class="form-input" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email" class="form-label">Email Address</label> <input type="email" id="email" class="form-input" placeholder="Enter your email"> </div> <div class="form-group"> <label for="phone" class="form-label">Phone Number</label> <input type="tel" id="phone" class="form-input" placeholder="Enter phone number"> </div> <div class="form-group"> <label for="message" class="form-label">Message</label> <textarea id="message" class="form-input" rows="4" placeholder="Your message"></textarea> </div> <div class="form-checkbox"> <input type="checkbox" id="subscribe"> <label for="subscribe">Subscribe to newsletter</label> </div> <button type="submit" class="form-submit">Send Message</button> </form> <!-- Inline Form (on larger screens) --> <form class="responsive-form form-inline"> <div class="form-group"> <input type="email" class="form-input" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-input" placeholder="Password"> </div> <button type="submit" class="form-submit">Login</button> </form> <!-- Grid Form --> <form class="responsive-form form-grid"> <div class="form-row"> <div class="form-group col-6"> <label class="form-label">First Name</label> <input type="text" class="form-input"> </div> <div class="form-group col-6"> <label class="form-label">Last Name</label> <input type="text" class="form-input"> </div> </div> <div class="form-row"> <div class="form-group col-12"> <label class="form-label">Address</label> <input type="text" class="form-input"> </div> </div> <div class="form-row"> <div class="form-group col-4"> <label class="form-label">City</label> <input type="text" class="form-input"> </div> <div class="form-group col-4"> <label class="form-label">State</label> <select class="form-input"> <option>Choose...</option> </select> </div> <div class="form-group col-4"> <label class="form-label">ZIP</label> <input type="text" class="form-input"> </div> </div> </form> </div>
/* Responsive Form Styles */
.responsive-form-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.responsive-form {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
font-size: 0.95rem;
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
.form-input::placeholder {
color: #aaa;
}
.form-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.form-checkbox input {
width: 18px;
height: 18px;
cursor: pointer;
}
.form-checkbox label {
color: #666;
cursor: pointer;
}
.form-submit {
width: 100%;
padding: 1rem;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.form-submit:hover {
background: #0056b3;
}
/* Inline Form */
.form-inline {
display: flex;
gap: 1rem;
align-items: flex-end;
}
.form-inline .form-group {
flex: 1;
margin-bottom: 0;
}
.form-inline .form-submit {
width: auto;
padding: 0.75rem 2rem;
}
/* Grid Form */
.form-grid {
background: #f8f9fa;
}
.form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -0.5rem;
}
.form-row .form-group {
padding: 0 0.5rem;
margin-bottom: 1rem;
}
.col-1 { flex: 0 0 8.33%; }
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }
/* Responsive Breakpoints */
@media (max-width: 768px) {
.responsive-form-container {
padding: 1rem;
}
.responsive-form {
padding: 1.5rem;
}
.form-inline {
flex-direction: column;
gap: 1rem;
}
.form-inline .form-group {
width: 100%;
}
.form-inline .form-submit {
width: 100%;
}
.form-row .form-group {
flex: 0 0 100% !important;
}
.col-4, .col-6, .col-8 {
flex: 0 0 100%;
}
}
@media (max-width: 480px) {
.responsive-form {
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-input {
padding: 0.6rem 0.8rem;
}
.form-checkbox {
flex-wrap: wrap;
}
}
Responsive Search Component
<div class="responsive-search"> <div class="search-wrapper"> <form class="search-form" role="search"> <input type="search" class="search-input" placeholder="Search products, articles, and more..." aria-label="Search"> <button type="submit" class="search-button"> <span class="search-icon">๐</span> <span class="search-text">Search</span> </button> </form> <div class="search-filters"> <select class="filter-select"> <option>All Categories</option> <option>Electronics</option> <option>Fashion</option> <option>Home</option> </select> <select class="filter-select"> <option>Sort by: Relevance</option> <option>Price: Low to High</option> <option>Price: High to Low</option> <option>Newest First</option> </select> </div> </div> <div class="search-suggestions"> <h4>Popular Searches:</h4> <div class="suggestion-tags"> <a href="#" class="suggestion-tag">Laptops</a> <a href="#" class="suggestion-tag">Smartphones</a> <a href="#" class="suggestion-tag">Headphones</a> <a href="#" class="suggestion-tag">Tablets</a> <a href="#" class="suggestion-tag">Accessories</a> </div> </div> </div>
.responsive-search {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.search-form {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.search-input {
flex: 1;
padding: 0.75rem 1rem;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.search-input:focus {
outline: none;
border-color: #007bff;
}
.search-button {
padding: 0.75rem 2rem;
background: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: background 0.3s;
}
.search-button:hover {
background: #0056b3;
}
.search-text {
display: inline;
}
.search-filters {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.filter-select {
flex: 1;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 6px;
background: white;
cursor: pointer;
}
.search-suggestions {
margin-top: 1.5rem;
}
.search-suggestions h4 {
color: #666;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.suggestion-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.suggestion-tag {
padding: 0.25rem 1rem;
background: #f0f0f0;
color: #666;
text-decoration: none;
border-radius: 20px;
font-size: 0.875rem;
transition: all 0.3s;
}
.suggestion-tag:hover {
background: #007bff;
color: white;
}
@media (max-width: 768px) {
.search-form {
flex-direction: column;
}
.search-button {
justify-content: center;
}
.search-text {
display: inline;
}
.search-filters {
flex-direction: column;
}
.suggestion-tags {
justify-content: center;
}
}
@media (max-width: 480px) {
.responsive-search {
padding: 1rem;
}
.search-input {
font-size: 16px; /* Prevent zoom on iOS */
}
.search-text {
display: inline;
}
}
Responsive Media Components
Responsive Video Component
<div class="responsive-media"> <!-- Video Player --> <div class="video-container"> <video class="responsive-video" controls poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <track src="subtitles.vtt" kind="subtitles" srclang="en"> Your browser doesn't support video. </video> </div> <!-- Video Info --> <div class="video-info"> <h3 class="video-title">Video Title</h3> <div class="video-meta"> <span class="video-views">1.2M views</span> <span class="video-date">โข 2 days ago</span> </div> <div class="video-actions"> <button class="video-action"> <span class="action-icon">๐</span> <span class="action-count">12K</span> </button> <button class="video-action"> <span class="action-icon">๐</span> <span class="action-count">123</span> </button> <button class="video-action"> <span class="action-icon">โ๏ธ</span> <span class="action-text">Share</span> </button> <button class="video-action"> <span class="action-icon">๐พ</span> <span class="action-text">Save</span> </button> </div> </div> <!-- Video Description --> <div class="video-description"> <p>This is the video description. It contains information about the video content and can be quite long. On mobile devices, this text will adjust to be readable while maintaining proper spacing.</p> </div> <!-- Related Videos --> <div class="related-videos"> <h4>Related Videos</h4> <div class="related-grid"> <div class="related-item"> <img src="thumbnail1.jpg" alt="Video thumbnail" class="related-thumb"> <div class="related-info"> <h5>Related Video Title</h5> <p>Channel Name</p> <span>100K views โข 1 day ago</span> </div> </div> <!-- More related items --> </div> </div> </div>
.responsive-media {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Video Container */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
margin-bottom: 1.5rem;
background: #000;
border-radius: 12px;
overflow: hidden;
}
.responsive-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Video Info */
.video-info {
margin-bottom: 1.5rem;
}
.video-title {
font-size: clamp(1.25rem, 3vw, 2rem);
margin-bottom: 0.5rem;
color: #333;
line-height: 1.3;
}
.video-meta {
color: #666;
font-size: 0.95rem;
margin-bottom: 1rem;
}
/* Video Actions */
.video-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.video-action {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #f0f0f0;
border: none;
border-radius: 20px;
cursor: pointer;
transition: background 0.3s;
font-size: 0.95rem;
}
.video-action:hover {
background: #e0e0e0;
}
.action-icon {
font-size: 1.2rem;
}
.action-count,
.action-text {
color: #333;
}
/* Video Description */
.video-description {
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 2rem;
line-height: 1.6;
color: #555;
}
/* Related Videos */
.related-videos h4 {
margin-bottom: 1rem;
color: #333;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.related-item {
display: flex;
gap: 1rem;
padding: 0.5rem;
border-radius: 8px;
transition: background 0.3s;
cursor: pointer;
}
.related-item:hover {
background: #f5f5f5;
}
.related-thumb {
width: 120px;
height: 68px;
object-fit: cover;
border-radius: 4px;
}
.related-info h5 {
margin: 0 0 0.25rem;
font-size: 0.95rem;
color: #333;
}
.related-info p {
margin: 0 0 0.25rem;
font-size: 0.875rem;
color: #666;
}
.related-info span {
font-size: 0.75rem;
color: #999;
}
@media (max-width: 768px) {
.responsive-media {
padding: 1rem;
}
.video-actions {
justify-content: center;
}
.video-action {
flex: 1;
justify-content: center;
}
.action-text {
display: inline;
}
.related-grid {
grid-template-columns: 1fr;
}
.related-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.related-thumb {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
}
@media (max-width: 480px) {
.video-actions {
flex-wrap: wrap;
}
.video-action {
flex: 0 0 calc(50% - 0.5rem);
}
.action-text {
display: inline;
}
}
Responsive Image Gallery
<div class="responsive-gallery"> <div class="gallery-grid"> <div class="gallery-item"> <img src="image1.jpg" alt="Gallery image 1" loading="lazy"> <div class="gallery-caption">Sunset at the beach</div> </div> <div class="gallery-item"> <img src="image2.jpg" alt="Gallery image 2" loading="lazy"> <div class="gallery-caption">Mountain landscape</div> </div> <div class="gallery-item"> <img src="image3.jpg" alt="Gallery image 3" loading="lazy"> <div class="gallery-caption">City lights at night</div> </div> <div class="gallery-item"> <img src="image4.jpg" alt="Gallery image 4" loading="lazy"> <div class="gallery-caption">Forest path</div> </div> <div class="gallery-item gallery-item-wide"> <img src="image5.jpg" alt="Gallery image 5" loading="lazy"> <div class="gallery-caption">Panoramic view</div> </div> <div class="gallery-item gallery-item-tall"> <img src="image6.jpg" alt="Gallery image 6" loading="lazy"> <div class="gallery-caption">Waterfall close-up</div> </div> </div> </div>
.responsive-gallery {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 250px;
gap: 1rem;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item-wide {
grid-column: span 2;
}
.gallery-item-tall {
grid-row: span 2;
}
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: white;
transform: translateY(100%);
transition: transform 0.3s;
}
.gallery-item:hover .gallery-caption {
transform: translateY(0);
}
/* Lightbox */
.gallery-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
z-index: 1000;
padding: 2rem;
}
.gallery-lightbox.active {
display: flex;
justify-content: center;
align-items: center;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.lightbox-close {
position: absolute;
top: 1rem;
right: 2rem;
color: white;
font-size: 3rem;
cursor: pointer;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 3rem;
cursor: pointer;
padding: 1rem;
}
.lightbox-nav.prev {
left: 1rem;
}
.lightbox-nav.next {
right: 1rem;
}
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 150px;
}
.gallery-item-wide {
grid-column: span 1;
}
.gallery-item-tall {
grid-row: span 1;
}
.gallery-caption {
transform: translateY(0);
font-size: 0.875rem;
padding: 0.5rem;
}
.lightbox-nav {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.responsive-gallery {
padding: 1rem;
}
.gallery-grid {
grid-template-columns: 1fr;
grid-auto-rows: 200px;
}
}
Responsive Modal Components
Responsive Modal
<!-- Modal Trigger -->
<button class="modal-trigger" onclick="openModal('demoModal')">Open Modal</button>
<!-- Modal -->
<div class="modal" id="demoModal">
<div class="modal-overlay" onclick="closeModal('demoModal')"></div>
<div class="modal-container">
<div class="modal-header">
<h3 class="modal-title">Modal Title</h3>
<button class="modal-close" onclick="closeModal('demoModal')">×</button>
</div>
<div class="modal-body">
<p>This is a responsive modal that adapts to different screen sizes. On mobile, it takes up most of the screen, while on desktop it's a centered dialog.</p>
<img src="image.jpg" alt="Modal image" class="modal-image">
<form class="modal-form">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-input">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-input">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal('demoModal')">Cancel</button>
<button class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s;
}
.modal.show {
display: flex;
opacity: 1;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
}
.modal-container {
position: relative;
margin: auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 90%;
width: 500px;
max-height: 90vh;
overflow-y: auto;
transform: translateY(-20px);
transition: transform 0.3s;
}
.modal.show .modal-container {
transform: translateY(0);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid #eee;
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #333;
}
.modal-close {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: #999;
transition: color 0.3s;
line-height: 1;
}
.modal-close:hover {
color: #333;
}
.modal-body {
padding: 1.5rem;
max-height: 60vh;
overflow-y: auto;
}
.modal-image {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 1rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
padding: 1.5rem;
border-top: 1px solid #eee;
background: #f8f9fa;
border-radius: 0 0 12px 12px;
}
.modal-footer .btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s;
}
.modal-footer .btn-primary {
background: #007bff;
color: white;
}
.modal-footer .btn-primary:hover {
background: #0056b3;
}
.modal-footer .btn-secondary {
background: #6c757d;
color: white;
}
.modal-footer .btn-secondary:hover {
background: #545b62;
}
/* Modal Sizes */
.modal-sm .modal-container {
width: 300px;
}
.modal-lg .modal-container {
width: 800px;
}
.modal-xl .modal-container {
width: 1140px;
}
.modal-fullscreen .modal-container {
width: 95%;
max-width: none;
height: 95vh;
}
/* Mobile Styles */
@media (max-width: 768px) {
.modal-container {
width: 95%;
margin: 1rem;
max-height: calc(100vh - 2rem);
}
.modal-header {
padding: 1rem;
}
.modal-body {
padding: 1rem;
}
.modal-footer {
padding: 1rem;
flex-direction: column-reverse;
}
.modal-footer .btn {
width: 100%;
}
.modal-title {
font-size: 1.125rem;
}
.modal-close {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.modal-container {
margin: 0.5rem;
max-height: calc(100vh - 1rem);
}
.modal-header {
padding: 0.75rem;
}
.modal-body {
padding: 0.75rem;
}
.modal-footer {
padding: 0.75rem;
}
}
// JavaScript for Modal
function openModal(id) {
document.getElementById(id).classList.add('show');
document.body.style.overflow = 'hidden';
// Add escape key listener
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeModal(id);
}
});
}
function closeModal(id) {
document.getElementById(id).classList.remove('show');
document.body.style.overflow = '';
}
Responsive Table Components
Responsive Table
<div class="responsive-table-container"> <!-- Option 1: Horizontal Scroll on Mobile --> <h3>Scrollable Table</h3> <div class="table-scroll"> <table class="responsive-table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Role</th> <th>Status</th> <th>Last Login</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Doe</td> <td>[email protected]</td> <td>Admin</td> <td><span class="badge active">Active</span></td> <td>2024-05-15</td> <td> <button class="table-btn">Edit</button> <button class="table-btn">Delete</button> </td> </tr> <!-- More rows --> </tbody> </table> </div> <!-- Option 2: Card Layout on Mobile --> <h3>Card Layout Table</h3> <table class="responsive-table card-table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td data-label="ID">1</td> <td data-label="Name">John Doe</td> <td data-label="Email">[email protected]</td> <td data-label="Status"><span class="badge active">Active</span></td> <td data-label="Actions"> <button class="table-btn">Edit</button> <button class="table-btn">Delete</button> </td> </tr> <tr> <td data-label="ID">2</td> <td data-label="Name">Jane Smith</td> <td data-label="Email">[email protected]</td> <td data-label="Status"><span class="badge pending">Pending</span></td> <td data-label="Actions"> <button class="table-btn">Edit</button> <button class="table-btn">Delete</button> </td> </tr> </tbody> </table> <!-- Option 3: Collapsible Table --> <h3>Collapsible Table</h3> <div class="collapsible-table"> <div class="table-row header"> <div class="table-cell">ID</div> <div class="table-cell">Name</div> <div class="table-cell">Email</div> <div class="table-cell">Status</div> <div class="table-cell">Actions</div> </div> <div class="table-row"> <div class="table-cell" data-title="ID">1</div> <div class="table-cell" data-title="Name">John Doe</div> <div class="table-cell" data-title="Email">[email protected]</div> <div class="table-cell" data-title="Status"> <span class="badge active">Active</span> </div> <div class="table-cell" data-title="Actions"> <button class="table-btn">Edit</button> <button class="table-btn">Delete</button> </div> </div> </div> </div>
/* Responsive Table Styles */
.responsive-table-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.responsive-table-container h3 {
margin: 2rem 0 1rem;
color: #333;
}
/* Option 1: Scrollable Table */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.responsive-table {
width: 100%;
border-collapse: collapse;
background: white;
min-width: 600px;
}
.responsive-table th {
background: #007bff;
color: white;
font-weight: 600;
padding: 1rem;
text-align: left;
font-size: 0.9rem;
white-space: nowrap;
}
.responsive-table td {
padding: 1rem;
border-bottom: 1px solid #eee;
color: #333;
}
.responsive-table tr:hover {
background: #f8f9fa;
}
/* Badge Styles */
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.badge.active {
background: #d4edda;
color: #155724;
}
.badge.pending {
background: #fff3cd;
color: #856404;
}
.badge.inactive {
background: #f8d7da;
color: #721c24;
}
/* Table Buttons */
.table-btn {
padding: 0.25rem 0.5rem;
margin: 0 0.25rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.875rem;
transition: background 0.3s;
}
.table-btn:hover {
opacity: 0.8;
}
/* Option 2: Card Layout Table */
.card-table {
min-width: auto;
}
.card-table thead {
display: table-header-group;
}
@media (max-width: 768px) {
.card-table,
.card-table thead,
.card-table tbody,
.card-table tr,
.card-table td {
display: block;
}
.card-table thead {
display: none;
}
.card-table tr {
margin-bottom: 1rem;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
border: none;
}
.card-table td::before {
content: attr(data-label);
font-weight: bold;
color: #666;
width: 40%;
}
}
/* Option 3: Collapsible Table */
.collapsible-table {
display: table;
width: 100%;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.table-row {
display: table-row;
}
.table-row.header {
background: #007bff;
color: white;
font-weight: bold;
}
.table-cell {
display: table-cell;
padding: 1rem;
border-bottom: 1px solid #eee;
}
.table-row:last-child .table-cell {
border-bottom: none;
}
@media (max-width: 768px) {
.collapsible-table,
.table-row,
.table-cell {
display: block;
}
.table-row {
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.table-row.header {
display: none;
}
.table-cell {
position: relative;
padding: 0.75rem;
padding-left: 40%;
}
.table-cell::before {
content: attr(data-title);
position: absolute;
left: 0.75rem;
width: 35%;
font-weight: bold;
color: #666;
}
.table-cell:last-child {
border-bottom: none;
}
}
@media (max-width: 480px) {
.responsive-table-container {
padding: 1rem;
}
.table-cell {
padding-left: 35%;
font-size: 0.875rem;
}
.table-cell::before {
font-size: 0.75rem;
}
.table-btn {
padding: 0.2rem 0.4rem;
font-size: 0.75rem;
}
}
Responsive Grid Systems
CSS Grid Based System
<div class="responsive-grid-demo"> <h3>Fluid Grid with auto-fit</h3> <div class="grid fluid-grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> <h3>12-Column Grid System</h3> <div class="grid col-12"> <div class="grid-item col-6 col-md-4 col-lg-3">Responsive Column</div> <div class="grid-item col-6 col-md-4 col-lg-3">Responsive Column</div> <div class="grid-item col-6 col-md-4 col-lg-3">Responsive Column</div> <div class="grid-item col-6 col-md-4 col-lg-3">Responsive Column</div> </div> <h3>Nested Grid</h3> <div class="grid col-2"> <div class="grid-item">Sidebar</div> <div class="grid-item"> <div class="grid col-2"> <div class="grid-item">Nested 1</div> <div class="grid-item">Nested 2</div> </div> </div> </div> <h3>Grid with Offset</h3> <div class="grid col-12"> <div class="grid-item col-4 offset-2">Offset by 2</div> <div class="grid-item col-4">Normal</div> </div> </div>
/* Responsive Grid System */
.responsive-grid-demo {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.responsive-grid-demo h3 {
margin: 2rem 0 1rem;
color: #333;
}
/* Base Grid */
.grid {
display: grid;
gap: 1rem;
margin-bottom: 2rem;
}
/* Fluid Grid - auto-fit */
.fluid-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Fixed columns */
.col-1 { grid-template-columns: repeat(1, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-5 { grid-template-columns: repeat(5, 1fr); }
.col-6 { grid-template-columns: repeat(6, 1fr); }
.col-7 { grid-template-columns: repeat(7, 1fr); }
.col-8 { grid-template-columns: repeat(8, 1fr); }
.col-9 { grid-template-columns: repeat(9, 1fr); }
.col-10 { grid-template-columns: repeat(10, 1fr); }
.col-11 { grid-template-columns: repeat(11, 1fr); }
.col-12 { grid-template-columns: repeat(12, 1fr); }
/* Grid Items */
.grid-item {
background: #007bff;
color: white;
padding: 1.5rem;
border-radius: 8px;
text-align: center;
font-weight: bold;
transition: transform 0.3s;
}
.grid-item:hover {
transform: scale(1.05);
background: #0056b3;
}
/* Column Spans */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
/* Offsets */
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }
.offset-4 { grid-column-start: 5; }
.offset-5 { grid-column-start: 6; }
/* Responsive Column Classes */
@media (min-width: 576px) {
.col-sm-1 { grid-column: span 1; }
.col-sm-2 { grid-column: span 2; }
.col-sm-3 { grid-column: span 3; }
.col-sm-4 { grid-column: span 4; }
.col-sm-5 { grid-column: span 5; }
.col-sm-6 { grid-column: span 6; }
}
@media (min-width: 768px) {
.col-md-1 { grid-column: span 1; }
.col-md-2 { grid-column: span 2; }
.col-md-3 { grid-column: span 3; }
.col-md-4 { grid-column: span 4; }
.col-md-5 { grid-column: span 5; }
.col-md-6 { grid-column: span 6; }
}
@media (min-width: 992px) {
.col-lg-1 { grid-column: span 1; }
.col-lg-2 { grid-column: span 2; }
.col-lg-3 { grid-column: span 3; }
.col-lg-4 { grid-column: span 4; }
.col-lg-5 { grid-column: span 5; }
.col-lg-6 { grid-column: span 6; }
}
@media (max-width: 768px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
grid-template-columns: 1fr;
}
.offset-1, .offset-2, .offset-3, .offset-4, .offset-5 {
grid-column-start: 1;
}
.col-span-2, .col-span-3, .col-span-4, .col-span-5, .col-span-6 {
grid-column: span 1;
}
}
Flexbox Based System
<div class="flex-grid-demo"> <h3>Flexbox Grid</h3> <div class="flex-row"> <div class="flex-col flex-6">6 columns</div> <div class="flex-col flex-6">6 columns</div> </div> <div class="flex-row"> <div class="flex-col flex-4">4 columns</div> <div class="flex-col flex-4">4 columns</div> <div class="flex-col flex-4">4 columns</div> </div> <div class="flex-row"> <div class="flex-col flex-3">3 columns</div> <div class="flex-col flex-6">6 columns</div> <div class="flex-col flex-3">3 columns</div> </div> <h3>Flexbox with Wrap</h3> <div class="flex-row wrap"> <div class="flex-col flex-4">Column 1</div> <div class="flex-col flex-4">Column 2</div> <div class="flex-col flex-4">Column 3</div> <div class="flex-col flex-4">Column 4</div> <div class="flex-col flex-4">Column 5</div> <div class="flex-col flex-4">Column 6</div> </div> <h3>Flexbox with Gutters</h3> <div class="flex-row gutter"> <div class="flex-col flex-4"> <div class="flex-box">Content</div> </div> <div class="flex-col flex-4"> <div class="flex-box">Content</div> </div> <div class="flex-col flex-4"> <div class="flex-box">Content</div> </div> </div> </div>
.flex-grid-demo {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.flex-grid-demo h3 {
margin: 2rem 0 1rem;
color: #333;
}
.flex-row {
display: flex;
margin: 0 -1rem 1rem;
}
.flex-row.wrap {
flex-wrap: wrap;
}
.flex-row.gutter {
margin: -0.5rem;
}
.flex-col {
padding: 0 1rem;
}
.flex-1 { flex: 0 0 8.33%; }
.flex-2 { flex: 0 0 16.66%; }
.flex-3 { flex: 0 0 25%; }
.flex-4 { flex: 0 0 33.33%; }
.flex-5 { flex: 0 0 41.66%; }
.flex-6 { flex: 0 0 50%; }
.flex-7 { flex: 0 0 58.33%; }
.flex-8 { flex: 0 0 66.66%; }
.flex-9 { flex: 0 0 75%; }
.flex-10 { flex: 0 0 83.33%; }
.flex-11 { flex: 0 0 91.66%; }
.flex-12 { flex: 0 0 100%; }
.flex-col .flex-box {
background: #007bff;
color: white;
padding: 1.5rem;
border-radius: 8px;
text-align: center;
}
/* Responsive */
@media (max-width: 992px) {
.flex-col {
flex: 1 1 50% !important;
}
}
@media (max-width: 768px) {
.flex-row {
flex-direction: column;
margin: 0;
}
.flex-col {
flex: 1 1 100% !important;
padding: 0.5rem 0;
}
.flex-row.wrap .flex-col {
flex: 1 1 100% !important;
}
}
@media (max-width: 480px) {
.flex-grid-demo {
padding: 1rem;
}
}
Practical Examples
Complete Responsive Dashboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Dashboard</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
}
/* Dashboard Layout */
.dashboard {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: 250px;
background: linear-gradient(180deg, #2c3e50, #1a252f);
color: white;
transition: width 0.3s;
}
.sidebar-header {
padding: 2rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header h2 {
font-size: 1.5rem;
white-space: nowrap;
}
.sidebar-nav {
padding: 1.5rem 0;
}
.sidebar-nav a {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: all 0.3s;
white-space: nowrap;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
background: rgba(255,255,255,0.1);
color: white;
}
.sidebar-nav i {
width: 24px;
margin-right: 1rem;
font-size: 1.2rem;
}
.sidebar-footer {
padding: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* Main Content */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #333;
}
.search-bar {
flex: 1;
max-width: 400px;
margin: 0 2rem;
}
.search-bar input {
width: 100%;
padding: 0.5rem 1rem;
border: 1px solid #ddd;
border-radius: 20px;
outline: none;
}
.user-menu {
display: flex;
align-items: center;
gap: 1.5rem;
}
.user-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.avatar {
width: 40px;
height: 40px;
background: #007bff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
/* Content Area */
.content {
padding: 2rem;
overflow-y: auto;
}
/* Stats Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
transition: transform 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-right: 1rem;
}
.stat-icon.blue { background: #e3f2fd; color: #1976d2; }
.stat-icon.green { background: #e8f5e9; color: #388e3c; }
.stat-icon.orange { background: #fff3e0; color: #f57c00; }
.stat-icon.red { background: #ffebee; color: #d32f2f; }
.stat-info h3 {
font-size: 2rem;
margin-bottom: 0.25rem;
}
.stat-info p {
color: #666;
}
/* Charts Row */
.charts-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-card {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.chart-placeholder {
height: 250px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
margin-top: 1rem;
}
/* Table Card */
.table-card {
background: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
th, td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
font-weight: 600;
color: #666;
}
.status {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.status.active { background: #d4edda; color: #155724; }
.status.pending { background: #fff3cd; color: #856404; }
.status.inactive { background: #f8d7da; color: #721c24; }
/* Responsive */
@media (max-width: 1024px) {
.sidebar {
width: 80px;
}
.sidebar-header h2,
.sidebar-nav span,
.sidebar-footer .user-info span {
display: none;
}
.sidebar-nav a {
justify-content: center;
padding: 1rem;
}
.sidebar-nav i {
margin-right: 0;
}
.sidebar-footer {
display: flex;
justify-content: center;
}
.avatar {
margin: 0;
}
}
@media (max-width: 768px) {
.dashboard {
flex-direction: column;
}
.sidebar {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
display: none;
}
.sidebar.show {
display: block;
}
.sidebar-nav {
display: flex;
justify-content: space-around;
padding: 0.5rem;
}
.sidebar-nav a {
padding: 0.75rem;
}
.sidebar-header,
.sidebar-footer {
display: none;
}
.header {
padding: 1rem;
}
.menu-toggle {
display: block;
}
.search-bar {
margin: 0 1rem;
}
.user-info span {
display: none;
}
.content {
padding: 1rem;
}
.stats-grid {
gap: 1rem;
}
.charts-row {
grid-template-columns: 1fr;
}
.stat-card {
padding: 1rem;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.stat-info h3 {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.chart-placeholder {
height: 200px;
}
}
</style>
</head>
<body>
<div class="dashboard">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>Dashboard</h2>
</div>
<nav class="sidebar-nav">
<a href="#" class="active">
<i>๐</i>
<span>Dashboard</span>
</a>
<a href="#">
<i>๐</i>
<span>Projects</span>
</a>
<a href="#">
<i>๐ฅ</i>
<span>Team</span>
</a>
<a href="#">
<i>๐
</i>
<span>Calendar</span>
</a>
<a href="#">
<i>๐ง</i>
<span>Messages</span>
</a>
<a href="#">
<i>โ๏ธ</i>
<span>Settings</span>
</a>
</nav>
<div class="sidebar-footer">
<div class="user-info">
<div class="avatar">JD</div>
<span>John Doe</span>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Header -->
<header class="header">
<button class="menu-toggle" onclick="toggleSidebar()">โฐ</button>
<div class="search-bar">
<input type="text" placeholder="Search...">
</div>
<div class="user-menu">
<span>๐</span>
<span>๐ฌ</span>
<div class="user-info">
<div class="avatar">JD</div>
<span>John Doe</span>
</div>
</div>
</header>
<!-- Content -->
<div class="content">
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon blue">๐ฐ</div>
<div class="stat-info">
<h3>$45,678</h3>
<p>Revenue</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon green">๐ฅ</div>
<div class="stat-info">
<h3>2,345</h3>
<p>Users</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon orange">๐</div>
<div class="stat-info">
<h3>78%</h3>
<p>Conversion</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon red">๐</div>
<div class="stat-info">
<h3>+23%</h3>
<p>Growth</p>
</div>
</div>
</div>
<!-- Charts -->
<div class="charts-row">
<div class="chart-card">
<h3>Revenue Overview</h3>
<div class="chart-placeholder"></div>
</div>
<div class="chart-card">
<h3>User Activity</h3>
<div class="chart-placeholder"></div>
</div>
</div>
<!-- Table -->
<div class="table-card">
<h3>Recent Activity</h3>
<table>
<thead>
<tr>
<th>User</th>
<th>Action</th>
<th>Status</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>File upload</td>
<td><span class="status active">Completed</span></td>
<td>2 min ago</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Profile update</td>
<td><span class="status pending">Pending</span></td>
<td>15 min ago</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>Login attempt</td>
<td><span class="status inactive">Failed</span></td>
<td>1 hour ago</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script>
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('show');
}
// Close sidebar on window resize if open
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
document.getElementById('sidebar').classList.remove('show');
}
});
</script>
</body>
</html>
Best Practices
Responsive Design Principles
/* 1. Mobile First Approach */
/* Base styles for mobile */
.component {
width: 100%;
padding: 1rem;
}
/* Enhance for larger screens */
@media (min-width: 768px) {
.component {
max-width: 750px;
margin: 0 auto;
padding: 2rem;
}
}
/* 2. Use Relative Units */
.component {
/* Good - scales with user preferences */
font-size: 1rem;
padding: 1em;
margin: 5vh 5vw;
width: min(90%, 1200px);
/* Avoid - fixed sizes */
font-size: 16px;
width: 1200px;
margin: 20px;
}
/* 3. Flexible Images */
img {
max-width: 100%;
height: auto;
object-fit: cover;
}
/* 4. Fluid Typography */
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
p {
font-size: clamp(1rem, 2vw, 1.25rem);
}
/* 5. Responsive Breakpoints */
/* Common breakpoints */
@media (max-width: 576px) { /* Mobile */ }
@media (min-width: 577px) and (max-width: 768px) { /* Tablet */ }
@media (min-width: 769px) and (max-width: 1024px) { /* Small desktop */ }
@media (min-width: 1025px) and (max-width: 1200px) { /* Desktop */ }
@media (min-width: 1201px) { /* Large desktop */ }
/* 6. Touch Targets */
button, a, .clickable {
min-height: 44px;
min-width: 44px;
padding: 0.5rem;
}
/* 7. Hide/Show Content Responsively */
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
@media (max-width: 768px) {
.mobile-only {
display: block;
}
.desktop-only {
display: none;
}
}
/* 8. Responsive Grids */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
/* 9. Responsive Navigation */
@media (max-width: 768px) {
.nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
display: none;
}
.nav-menu.show {
display: flex;
}
}
/* 10. Test on Real Devices */
/* Simulate device constraints */
@media (max-width: 320px) { /* iPhone SE */ }
@media (max-width: 375px) { /* iPhone X */ }
@media (max-width: 414px) { /* iPhone Plus */ }
@media (min-width: 768px) and (max-width: 1024px) { /* iPad */ }
Performance Optimization
/* 1. Lazy Loading */
img {
loading: lazy;
}
/* 2. Responsive Images */
<picture>
<source srcset="small.webp" type="image/webp" media="(max-width: 768px)">
<source srcset="large.webp" type="image/webp">
<img src="fallback.jpg" alt="Responsive image">
</picture>
/* 3. Optimize Critical CSS */
/* Inline critical styles */
<style>
/* Critical above-the-fold styles */
.header { position: fixed; }
.hero { min-height: 100vh; }
</style>
/* 4. Reduce Repaints */
.animated {
transform: translateZ(0); /* Force GPU acceleration */
will-change: transform;
}
/* 5. Media Queries Performance */
/* Group media queries */
@media (max-width: 768px) {
.nav { flex-direction: column; }
.grid { grid-template-columns: 1fr; }
.header { padding: 1rem; }
}
Common Pitfalls and Solutions
/* Pitfall 1: Forgetting Viewport Meta */
<!-- Always include this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* Pitfall 2: Fixed Width Elements */
/* Bad */
.sidebar {
width: 300px;
}
/* Good */
.sidebar {
width: 100%;
max-width: 300px;
}
/* Pitfall 3: Not Using Flex-wrap */
/* Bad */
.container {
display: flex;
/* Items may overflow */
}
/* Good */
.container {
display: flex;
flex-wrap: wrap;
}
/* Pitfall 4: Tiny Touch Targets */
/* Bad */
.nav-link {
padding: 5px;
}
/* Good */
.nav-link {
padding: 12px;
min-height: 44px;
}
/* Pitfall 5: Font Size Too Small */
/* Bad */
body {
font-size: 12px;
}
/* Good */
body {
font-size: 16px;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
Conclusion
Responsive components are essential for modern web development:
Key Takeaways
- Mobile First: Start with mobile styles and enhance upward
- Fluid Layouts: Use percentages, viewport units, and flex/grid
- Flexible Media: Images and videos should scale
- Responsive Typography: Use clamp() and relative units
- Touch-Friendly: Ensure tap targets are large enough
- Performance: Optimize for mobile networks
- Testing: Test on real devices and various screen sizes
Best Practices Checklist
| Principle | Implementation |
|---|---|
| Mobile First | Base styles for mobile, enhance with media queries |
| Fluid Layouts | %, vw, vh, flex, grid |
| Flexible Media | max-width: 100%, object-fit |
| Responsive Text | clamp(), rem, em |
| Touch Targets | min-height: 44px |
| Performance | lazy loading, optimized images |
| Testing | Device emulation, real devices |
Next Steps
- Practice building mobile-first components
- Test on various devices and browsers
- Optimize images for different screen sizes
- Implement progressive enhancement
- Stay updated with new CSS features
- Study responsive patterns from popular sites
- Use browser dev tools to debug responsive issues
Remember: A truly responsive design isn't just about fitting different screen sizesโit's about providing an optimal experience for every user, regardless of their device!