MoreLesson 268Free preview

Split Screen

This lesson is part of How To · All levels

Summary

Split screen divides a page into two equal parts, such as a promotional panel and a form panel. Flexbox or Grid can make both sides aligned easily, and then the query media stacks them on a small screen. Make sure the height and padding are set so that the content is easy to read.

Key points

Display: flex on the container makes two panels side by side.
Flex: 1 on both panels dividing the space evenly.
On a small screen, change the flex-direction to a column so that the panels stack.
Min-height: 100vh gives the impression of a full page without cutting the content.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.