Responsive Web Design & Media Queries

1<!-- Mandatory in <head> for responsive pages -->
2<meta name="viewport" content="width=device-width, initial-scale=1.0" />

1/* Base Mobile Styles */
2.container {
3  width: 100%;
4  padding: 1rem;
5}
6 
7/* Tablet (640px and up) */
8@media (min-width: 640px) {
9  .container {
10    padding: 2rem;
11  }
12}
13 
14/* Desktop (1024px and up) */
15@media (min-width: 1024px) {
16  .container {
17    max-width: 1200px;
18    margin: 0 auto;
19  }
20}

1h1 {
2  /* Min 2rem (32px), Preferred 5vw, Max 4rem (64px) */
3  font-size: clamp(2rem, 5vw, 4rem);
4}

1/* 1. Define the parent container */
2.sidebar-widget {
3  container-type: inline-size;
4}
5 
6/* 2. Target child elements when container is >= 400px wide */
7@container (min-width: 400px) {
8  .user-card {
9    display: flex;
10    gap: 1rem;
11  }
12}