Responsive Layouts

A portfolio that only works at your laptop width is not finished.

Responsive design means the layout adapts to available space while preserving usable structure.

Start fluid

Prefer flexible layout before stacking media-query patches.

Example:

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
}

The grid can change column count as space changes.

Test real widths

Inspect at least:

• narrow phone-like width;
• Chromebook/laptop width;
• wide desktop width;
• 200% browser zoom if practical.

Watch for failure patterns

• navigation wrapping over content;
• fixed-width images overflowing;
• code blocks breaking the viewport;
• unreadably tiny text;
• cards becoming narrower than their content;
• hover-only interactions.

Jekyll boundary

Jekyll builds the same static source/output architecture.

Responsive layout happens primarily in browser HTML/CSS behavior.

If the correct stylesheet loads but the layout fails at 375px, rebuilding Jekyll repeatedly is unlikely to fix the CSS design.

Portfolio action

Make Home, About, Projects, and Journal usable at narrow width.

Record one responsive failure and the specific CSS change that fixed it.

Checkpoint

Show the same generated page at two widths and explain what changed by design versus what accidentally broke.