CSS Responsive Layout Interactive Exercise

Responsive Design Challenges

Test your understanding of responsive design with these challenges. Click the buttons to check your knowledge!

Challenge 1: Create a mobile-first layout where content is stacked vertically on mobile and then changes to a two-column layout on desktop.

✅ Challenge complete! You've created a mobile-first layout that adapts to larger screens.

Challenge 2: Hide the sidebar on mobile devices and show it on larger screens.

✅ Challenge complete! The sidebar is hidden on mobile and visible on larger screens.

Challenge 3: Arrange the flex items in a row on desktop, but stack them vertically on mobile.

✅ Challenge complete! The flex items are correctly arranged based on screen size.

CSS Responsive Layout Interactive Exercise

Instructions

Use the controls below to experiment with responsive layouts. Adjust the viewport size and see how different layout techniques adapt to various screen sizes!

Responsive design is a crucial concept in modern web development that ensures your websites look good on all devices. Key techniques include:

Media Queries: Apply different styles based on device characteristics
Fluid Layouts: Using relative units (%, em, rem) instead of fixed units (px)
Flexible Images: Ensuring images scale properly
CSS Grid and Flexbox: Modern layout systems that make responsive design easier

Layout Controls

Layout Type:

Mobile Layout Pattern:

Tablet Layout Pattern:

Desktop Layout Pattern:

Tablet Breakpoint (px): 600px

Desktop Breakpoint (px): 900px

Preview

320 x 480

Main Content

Item 1

Item 2

Item 3

/* Base layout */
.container {
  display: grid;
  gap: 10px;
}

/* Mobile layout (default) */
.container {
  grid-template-columns: 1fr;
  grid-template-areas: "header"
                                       "sidebar"
                                       "main"
                                       "footer";
}

/* Tablet layout */
@media (min-width: 600px) {
  .container {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "header header"
                                         "main sidebar"
                                         "footer footer";
  }