Video narration
Want your website to look great on any screen? Start with the viewport meta tag in your HTML: <meta name="viewport" content="width=device-width, initial-scale=1.0">. It tells mobile browsers to match the screen’s width. Next, build flexible layouts. Use width: 100% so elements can shrink, max-width to prevent them from stretching too wide, and flexbox to arrange items that can wrap and reflow. Then add a simple breakpoint with a media query. For screens under 600 pixels, you can change the layout and typography: @media (max-width: 600px) { .container { width: 100%; padding: 16px; } body { font-size: 14px; } } On desktop, the container can be narrower with larger text; on mobile, it becomes full width with padding, and the font size decreases for a comfortable fit. That’s responsive design in CSS.