Tablet Responsive Test

Layout Gaps

• •Three-column desktop layouts that half-collapse at tablet width, leaving awkward two-wide-one-narrow configurations
• •Mobile layouts that don't expand to use available tablet space, leaving large empty margins
• •Missing breakpoints between 768px and 1024px causing sudden layout jumps
• •Sidebars that either disappear too early or stay too long relative to content

Orientation Issues

• •Layout that works in portrait but breaks in landscape (or vice versa)
• •Fixed-height elements that don't adapt to landscape's reduced vertical space
• •Modals and overlays that position incorrectly after orientation change
• •Videos and iframes that don't maintain aspect ratio during rotation

Touch and Interaction

• •Hover-dependent interactions (tooltips, dropdowns) with no touch equivalent
• •Drag and scroll conflicts where swipe gestures interfere with page scroll
• •Forms with inputs too small for comfortable touch typing on tablet keyboards
• •Custom scroll containers that conflict with native tablet scroll behavior

Add Tablet-Specific Breakpoints

Most frameworks jump from mobile (< 768px) to desktop (> 1024px). Add intermediate breakpoints to handle the tablet range properly:

/* Mobile first approach with tablet breakpoints */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: single column */
}

/* Small tablet */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large tablet / small desktop */
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Handle Orientation Changes

Use the orientation media query and CSS custom properties to adapt layouts when users rotate their device:

/* Detect orientation */
@media (orientation: portrait) {
  .hero {
    min-height: 60vh;
  }
  .sidebar {
    display: none; /* Hide sidebar in portrait */
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .hero {
    min-height: 40vh; /* Less height in landscape */
  }
  .sidebar {
    display: block;
    width: 240px;
  }
}

Responsive Images for Tablet

Serve appropriately sized images using srcset so tablets don't download unnecessarily large desktop images:

<img
  src="image-800w.jpg"
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  alt="Description"
/>