Responsive web design makes layouts, typography, images, and other content adapt to different screen sizes and orientations. The goal is simple: pages should remain usable, readable, and navigable without maddening horizontal scrolling. section 14.0
Build responsiveness from a sturdy starting point:
- Size elements to their borders with box-sizing: border-box, then configure the viewport so the page matches the device width at its natural scale. section 14.2
- Start with the smallest practical layout, usually a smartphone width, and include only the content and actions users truly need. section 14.5
- Add complexity through media queries as the screen becomes wider instead of trying to squeeze a desktop layout into a phone. section 14.5
A sidebar that waits for room
A narrow layout can use one grid column and hide a quotation sidebar. At 750 pixels and above, a media query expands the grid to four columns and reveals the sidebar. Small screens stay focused; wider screens get the extra furniture. section 14.5
.container {
display: grid;
grid-template-columns: 1fr; #1
grid-template-areas: #1
"header" #1
"article" #1
"sidebar" #1
"footer"; #1
}
.quotation {
display: none; #2
}
@media (min-width: 750px) {
.container {
grid-template-columns: repeat(4, 1fr); #3
grid-template-areas: #3
"header header header header" #3
"quotation article article sidebar" #3
"footer footer footer footer"; #3
}
.quotation {
display: block; #4
grid-area: quotation;
}
}
Inspect the complete mobile-first grid rule and its wider-screen media query, including the layout areas and sidebar visibility change. section 14.5
Responsiveness is also a practical debugging target: a portfolio that works on desktop and landscape tablets may still need breakpoints before it behaves on smartphones. section 20.6
