| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 10413
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; hit
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Tue, 14 Oct 2025 08:09:09 GMT
etag: "0d9f49c2e567e00c808663488026654d-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7GW8733FFCCV2B2WZHYAC5M
content-length: 2043
Responsive header, two columns and a footer
Responsive header, two columns and a footer
This is example shows a two column pattern, with header and footer. Using media queries to move between a single and two column version. It could be a main page layout or a component of your page. The fallback uses floats and Feature Queries.
Techniques used to create this layout
Tips and techniques for fallback layouts can be found in my Grid Fallbacks and Overrides Cheatsheet.
Example on CodePen
See the Pen Header, 2 columns, footer responsive version by rachelandrew (@rachelandrew) on CodePen.