Using media queries to un-fix sticky headers / footers

The objective of this technique is to be able to present content without sticky headers and footers when the space of the viewport is limited. This may be because of a device held in landscape mode or by zooming on a dektop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor lorem vitae quam aliquam, vel vulputate dolor ultricies. Sed sed nunc ipsum. Aliquam rhoncus risus pellentesque, faucibus nunc sodales, laoreet risus. Nulla interdum purus at facilisis porta.

Panel 1

Nam venenatis turpis in erat tincidunt, non laoreet sem egestas. Etiam feugiat vehicula risus, non lobortis turpis aliquam nec. Nunc nec cursus arcu. In felis sapien, dictum a metus in, vehicula sem. Morbi in aliquam lorem. Suspendisse in interdum nunc.

Panel 2

Curabitur semper dui dui, quis interdum felis ullamcorper ut. Sed mauris eros, ullamcorper eget dolor a, fringilla consequat mi. In tortor lorem, varius in accumsan et, volutpat eu dolor. Proin fermentum velit non nulla blandit pharetra.

Donec malesuada maximus mauris, sed dictum augue mattis at.

Donec eu blandit lorem, in tempus ante. Fusce scelerisque sapien in erat varius, non viverra ex pellentesque.

Aliquam congue vehicula felis, id ultrices tortor hendrerit sit amet. Nunc elementum tincidunt lacus in viverra. Nulla et porta nisi. Cras sit amet justo commodo, tincidunt magna vitae, suscipit libero. Aliquam in metus lectus.

Panel 3

Nunc elit lacus, porta sit amet tristique at, viverra vitae urna. Proin sit amet velit vel metus posuere pretium a luctus magna. Fusce massa ipsum, ultricies non nisi in, tempus lobortis sem.

Panel 4

Nullam a massa egestas eros suscipit iaculis. Nunc consequat augue at arcu eleifend tempor. Nulla sed lectus maximus consequat diam. Nullam tempor volutpat placerat. Aenean eu porttitor augue.