Responsive Design Guide

What is Responsive Design?

Responsive design ensures your website looks great on any device. It adapts layout, images, and functionality based on the screen size.

Media Queries

Media queries let you apply CSS rules conditionally.

@media (max-width: 900px) {
  .responsive-box { background: #e64a19; }
}
@media (max-width: 600px) {
  .responsive-box { background: #c62828; }
}

Live Demo

Resize the browser to see the color change.

Viewport Meta Tag

Include this tag in your <head> to control layout on mobile browsers.

<meta name="viewport" content="width=device-width, initial-scale=1.0">