Split Screen Layout

Part of the Practical Frontend section of Coddy's HTML journey — lesson 29 of 35.

Split screen layouts divide the viewport into two distinct sections, typically side by side. This pattern is effective for comparing content, showcasing dual themes, or separating navigation from main content.

First, let's create the HTML structure:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

Now, let's add the CSS to create our split screen layout:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* On mobile, the sections stack vertically */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* On larger screens, they display side by side */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

This layout starts as a vertical stack on mobile devices, following our mobile-first approach. When the screen width reaches 768px or larger, the layout changes to a horizontal split.

Challenge Body:

Create a responsive split screen layout for a product showcase. The left side should display product information, and the right side should show the product image.

Requirements:

The split screen should be vertical on mobile (below 768px) and horizontal on larger screens
The left side should have a dark background (#222) and white text
The right side should have a light background (#f5f5f5)
Add padding of 2rem to both sides
On screens larger than 768px, the left side should take up 40% of the width and the right side 60%

Challenge

Easy

You are given an HTML page with two sections styled mobile-first. Your task is to turn it into a Split Screen Layout that works well on desktop.

On larger screens (min-width: 768px), show them side by side.
Give the left side a background color rgb(74, 144, 226) and the text color rgb(255, 255, 255).
Give the right side a background color rgb(255, 255, 255) and the text color rgb(51, 51, 51).

Cheat sheet

Split screen layouts divide the viewport into two sections, typically side by side. They're effective for comparing content or separating navigation from main content.

HTML structure:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

CSS for responsive split screen layout:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* Mobile: sections stack vertically */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* Larger screens: display side by side */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

The layout starts as a vertical stack on mobile devices following mobile-first approach, then changes to horizontal split on screens 768px or larger.

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>