Responsive Design

by jacobwsmith

HTML

<header>Header</header>
<main>
  <div class="col-left">Left Column</div>
  <div class="col-right">Right Column</div>
</main>
<footer>Footer</footer>

CSS

/* Mobile-first base styles */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-color: #f4f4f4;
}

header,
footer,
main div {
  padding: 1em;
  text-align: center;
  color: white;
}

header {
  background-color: #333;
}
footer {
  background-color: #333;
}
.col-left {
  background-color: #007bff;
}
.col-right {
  background-color: #28a745;
}

/* Main content layout (initially stacked on mobile) */
main {
  display: grid;
  grid-template-areas:
    "left"
    "right";
  gap: 1em;
  padding: 1em;
}
.col-left {
  grid-area: left;
}
.col-right {
  grid-area: right;
}
/* Media query for larger screens (e.g., tablets and desktops) */
@media (min-width: 768px) {
  main {
    grid-template-areas: "left right";
    /* Left column takes 70% width, Right column takes 30% */
    grid-template-columns: 2fr 1fr; /* Using flexible fractions */
  }
}