Building Mobile-Friendly Websites

Responsive design ensures your website looks good on all devices - desktops, tablets, and phones.

Media queries allow you to apply different styles based on screen size, orientation, and other device characteristics.

/* Mobile First Approach */
/* Base styles for mobile */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

/* Orientation */
@media (orientation: landscape) {
  .sidebar { display: block; }
}

/* Print */
@media print {
  .no-print { display: none; }
}

• Mobile-first - Start with mobile styles, add desktop
• @media - Define breakpoints
• min-width - Minimum screen width
• max-width - Maximum screen width
• Common breakpoints: 576px, 768px, 992px, 1200px
• orientation: portrait or landscape

<div class="responsive-grid">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
  <div class="col">Column 4</div>
</div>
<p class="info">Resize the window to see the layout change!</p>