Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Columns</title>
<style>
  /* Base styles for columns */
  .column {
    float: left;
    width: 50%; /* Display two columns side by side */
    box-sizing: border-box;
    padding: 10px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* Media query for screens with maximum width of 600px */
  @media only screen and (max-width: 600px) {
    .column {
      width: 100%; /* Make columns full width */
    }
  }
</style>
</head>
<body>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Content for column 1 goes here.</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Content for column 2 goes here.</p>
  </div>
</div>

</body>
</html>
Editor is loading...