Responsive 50-50 split layout
Implement a responsive layout that split 50-50 along the shorter dimension
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise, you will practice using media queries to build an orientation-sensitive layout.
Skills you will acquire
- Responding to orientation changes
- Using flexbox
- Using grid
Objective
- Implement a layout that consists of two blocks split 50-50
- In the vertical orientation, the split is left-right
- In the horizontal orientation, the split is top-bottom
Check your solution
- The page loads with two equally sized areas
- In the horizontal orientation, they are laid out next to each other
- In the vertical orientation, they are laid out on top of each other
- The first block contains a short paragraph
- The second block contains an image that takes up the maximum available space with a padding while maintaining the aspect ratio
Keep in mind
There are two ways to achieve the 50-50 split layout. You can either use a flexbox or a grid. You should try both options.
To change the layout based on the orientation, you can use the orientation
media feature in a media query.
You can test the layout by using the responsive/mobile view on your browser using the orientation feature to force different orientation.
Try different image aspect ratios (square, horizontal, vertical) for this exercises, and make the layout work with all of them.