Responsive Design

Introduction

Responsive web design ensures that your site looks great on any device—from large desktop monitors to tiny smartphones. It combines fluid grids, flexible images, and CSS media queries.

Viewport Meta Tag

The viewport meta tag tells browsers how to control the page's dimensions and scaling.

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

Media Queries

Media queries apply different styles based on device characteristics.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Flexbox Basics

Flexbox makes it simple to create flexible layouts.

.flex-container{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.flex-item{
  flex:1 1 200px;
}

CSS Grid Fundamentals

CSS Grid provides a two‑dimensional layout system.

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
}

Responsive Demo