Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Responsive Zig Zag Alternating Layout with CSS
The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS.
Set a container for text
We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the width i.e. 2/3 −
<div class="width66"> <h1>Docker</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
Set a container for image
We have set a container for image and the class name is given width33. One of them is shown below. The text will take 33% of the width i.e. 1/3 −
<div class="width33"> <img src="https://www.tutorialspoint.com/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes"> </div>
Clear the floats
Here, we have set the clear property to the both value. This is to push the element below left and right floated element −
.row:after {
content: "";
display: table;
clear: both
}
Our 2/3 column
This is a container for the text set in the layout. The width is set 66% i.e. 2/3 column. Rest, the 33% space would be allotted for the column with the image −
.width66 {
float: left;
width: 66.66666%;
padding: 20px;
height: 471px;
}
Our 1/3 column
This is a container for the image set in the layout. The width is set 33% i.e. 1/3 column. Rest, the 66% space was allotted to the column with the text −
.width33 {
float: left;
width: 33.33333%;
padding: 20px;
height: 471px;
}
Set the responsiveness
The media queries concept is used for the responsiveness. Set width 100% for devices less than 1000px. This will set the columns on top each other −
@media screen and (max-width: 1000px) {
.width66,
.width33 {
width: 100%;
text-align: center;
}
img {
margin: auto;
}
}
Example
To create responsive zig zag layout with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div h1{
font-size: 40px;
color: blueviolet;
text-align: center;
}
div p{
font-size: 18px;
}
.container {
padding: 64px;
}
.row:after {
content: "";
display: table;
clear: both
}
.width66 {
float: left;
width: 66.66666%;
padding: 20px;
height: 471px;
}
.width33 {
float: left;
width: 33.33333%;
padding: 20px;
height: 471px;
}
.large-font {
font-size: 48px;
}
.xlarge-font {
font-size: 64px
}
.button {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
}
img {
display: block;
height: 250px;
width: 250px;
max-width: 100%;
}
@media screen and (max-width: 1000px) {
.width66,
.width33 {
width: 100%;
text-align: center;
}
img {
margin: auto;
}
}
</style>
</head>
<body>
<div class="width66">
<h1>Docker</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width33">
<img src="https://www.tutorialspoint.com/docker/images/docker-mini-logo.jpg" alt="Docker">
</div>
<div class="width33">
<img src="https://www.tutorialspoint.com/ansible/images/ansible-mini-logo.jpg" alt="Ansible">
</div>
<div class="width66">
<h1>Ansible</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width66">
<h1>Kubernetes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width33">
<img src="https://www.tutorialspoint.com/kubernetes/images/kubernetes-mini-logo.jpg" alt="Kubernetes">
</div>
</body>
</html>
2K+ Views
