Html/css looks good until it's a different view size

HTML & CSS
10

Since the code in your first post was using flexbox…

A search for “flexbox layout” would have lead you in the right direction.
Then all you needed to do was apply yourself to those references. That’s how most of us around here learn, by reading the specs and putting those concepts into practice.

Try this example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header Columns</title>
<style>
.jumbo {
  display: flex;
  flex-flow: row nowrap; /*change to 'row wrap' for columns to stack before text wraps*/
  justify-content: space-around;
  padding: 5px;
  background-color: #200843;
}
.col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  margin: 5px;
  text-align: center;
}
.header {
  padding: 0 20px;
  border: 1px solid #696969;
  color: #fff;
}
.box {
  padding:15px;
  border: 1px solid #696969;
  font-size: 1.1em;
  color:#888F97;
}
.box.one {
  background: blue url('../images/t0.png') no-repeat;
  margin-bottom: 10px;
}
.box.two {
  background: lime url('../images/c5.png') no-repeat;
}
</style>

</head>
<body>

<div class="jumbo">
   <div class="col header">
      <h1>Header Text</h1>
   </div>
   <div class="col">
      <div class="box one">Box One Text</div>
      <div class="box two">Box Two Text</div>
   </div>
</div>

</body>
</html>
1 Like