Exit

CSS: layout of the header

posted on May 22, 2024, last updated on Saturday, November 23, 2024 at 10:51 AM

The final result can refer to the header banner of this page. ⬆️

the Originals

NYC MTA design guideline

the Header

header banner

Components

Brand

Post title

Responsive layout

Using the grid system from Bootstrap, the header can adapt to different window/screen size by arranging its components .

  • xs and sm

Using media queries @media to manually add some style based on the width of the viewport.

display: flex

Table of Content

Recent posts