Categories
CSS Web development

How to create a responsive zig zag layout?

How to create a responsive zig zag layout?

To create the CSS responsive zig zag layout follow the steps below:

Demo:

Step1.

Add HTML

<div class="content-container" style="background-color: #cbaba6;">
  <div class="col-container">
    <div class="column-one">
      <h1 class="xl-font"><b>HTML</b></h1>
      <h1 class="l-font"><b>Gives content structure.</b></h1>
      <button class="button">Learn HTML</button>
    </div>
    <div class="column-two">
        <img src="https://lenadesign.org/wp-content/uploads/2021/04/Sequence-01.gif" width="335" height="471">
    </div>
  </div>
</div>

<div class="content-container" style="background-color: #945b5d;">
  <div class="col-container">
    <div class="column-two">
      <img src="https://lenadesign.org/wp-content/uploads/2021/04/css.gif" alt="CSS" width="335" height="471">
    </div>
    <div class="column-one">
      <h1 class="xl-font"><b>CSS</b></h1>
      <h1 class="l-font"><b>Describes how HTML elements are displayed on the website.</b></h1>
      <button class="button">Learn CSS</button>
    </div>
  </div>
</div>

<div class="content-container" style="background-color: #ebdbcb";>
  <div class="col-container">
    <div class="column-one">
      <h1 class="xl-font"><b>JavaScript</b></h1>
      <h1 class="l-font"><b>What can't do CSS, JavaScript does.</b></h1>
      <button class="button">Learn JavaScript</button>
    </div>
    <div class="column-two">
        <img src="https://lenadesign.org/wp-content/uploads/2021/04/js-corrected.gif" width="335" height="471" >
    </div>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing:border-box;
}

body {
  margin: 0;
  font-family: tahoma;
}

.content-container {
  padding: 75px;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}

.column-one {
  float: left;
  width: 66.66666%;
  padding: 25px;
}

.column-two {
  float: left;
  width: 33.33333%;
  padding: 25px;
}

.l-font {
  font-size: 45px;
  color: #03071e;
}

.xl-font {
  font-size: 65px;
  color: #03071e;
}

.button {
  border: 5px solid #03071e;
  background-color: transparent;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  color: #03071e;
  font-weight: bold;
  transition: .2s;
}

.button:hover {
  background-color: #03071e;
  color: white;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 800px) {
  .column-one,
  .column-two {
    width: 100%;
    text-align: center;
  }
  img {
    margin: auto;
  }
}

Enjoy coding!

Read also:

How to create equal height columns with CSS?

How to create a responsive three-column layout?

CSS Hamburger Menu

Categories
CSS Web development

How to create a responsive three-column layout?

How to create a responsive three-column layout?

To create the CSS responsive two-column layout (three equal columns, or three unequal columns) follow the steps below:

Demo (three equal columns):

Column 1

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Column 2

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Column 3

Add some text here..

Add some text here..

Add some text here..

Add some text here..

*resize the browser window to see the responsive effect.


Step1.

Add HTML

Create the column container and add three columns:

<div class="col-container">
  <div class="col" style="background-color:#2a9d8f;">
    <h4>Column 1</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="col" style="background-color:#e9c46a;">
    <h4>Column 2</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="col" style="background-color:#e76f51;">
    <h4>Column 3</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}
.col {
  float: left;
  width: 33.33%;
  padding: 15px;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .col {
    width: 100%;
  }
}

Demo (three unequal columns):

Side

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Main

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Side

Add some text here..

Add some text here..

Add some text here..

Add some text here..

*resize the browser window to see the responsive effect.


Step1.

Add HTML

Create the column container and add three columns:

<div class="column-container">
  <div class="column left-side" style="background-color:#2a9d8f;">
    <h4>Side</h4>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
  </div>
  <div class="column main" style="background-color:#e9c46a;">
    <h4>Main</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="column right-side" style="background-color:#e76f51;">
    <h4>Side</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

.column {
  float: left;
  padding: 10px;

}

.left-side, .right-side {
  width: 30%;
}

.main {
  width: 40%;
}

.column-container:after {
  content: "";
  display: table;
  clear: both;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Enjoy coding!

Read also:

CSS Columns

CSS Grid