Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
< 768px
768px - 1024px
> 1024px
/* Base styles for mobile */
.container {
width: 100%;
padding: 10px;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 20px;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width to add complexity for larger screens. This approach is cleaner and more performant!<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>📱 Responsive Grid</h1>
<div class="status" id="status">Loading...</div>
<div class="grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
</div>
</body>
</html>Loading preview...
320pxSmall phones
@media (min-width: 320px)480pxPhones (landscape)
@media (min-width: 480px)768pxTablets
@media (min-width: 768px)1024pxLaptops
@media (min-width: 1024px)1280pxDesktops
@media (min-width: 1280px)1536pxLarge screens
@media (min-width: 1536px)Portrait or landscape
@media (orientation: landscape)Dark mode detection
@media (prefers-color-scheme: dark)Hover capability
@media (hover: hover)Screen aspect ratio
@media (aspect-ratio: 16/9)