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
Changing Layouts Based on Screen Size Using CSS
To change layouts based on screen size in CSS, we will create a parent div and wrap other children divs within it. Using Media Queries, the layout of the screen size will be changed. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop etc.
In this article, we are having four boxes of same width, our task is to change layouts based on screen size in CSS.
Steps to Chnage Layouts Based on Screen Size
We will be following below mentioned steps to change layouts based on screen size in CSS.
- We have created four div boxes of same width and wrapped them inside a parent div having class name container.
- Then, we have used col class which sets the width of all four boxes, sets the padding and text color. CSS float property aligns four boxes to left and place them in a row side by side.
- Then we have used background-color property to set the different color of each boxes.
- We have used :after psuedo element to clear the float and make parent div behave like table which enclose floating child element allowing parent div to expand properly.
- We have used media queries to change layouts based on screen size. If the screen size gets smaller than 900px then width of the boxes becomes 50% from 25%. When screen size gets smaller than 600px then width of the boxes becomes 100% from 50%.
Example
Here is a complete example code implementing above mentioned steps to change layouts based on screen size in CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
* {
box-sizing: border-box;
}
.col {
color: white;
float: left;
width: 25%;
padding: 10px;
}
.col1 {
background-color: rgb(153, 29, 224);
}
.col2 {
background-color: rgb(12, 126, 120);
}
.col3 {
background-color: rgb(207, 41, 91);
}
.col4 {
background-color: rgb(204, 91, 39);
}
.container:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
</style>
</head>
<body>
<h3>
Changing Layouts Based on Screen Size
using CSS
</h3>
<p>
Resize the screen to see the below divs
resize themselves.
</p>
<div class="container">
<div class="col col1">
<h2>First box</h2>
</div>
<div class="col col2">
<h2>Second box</h2>
</div>
<div class="col col3">
<h2>Third box</h2>
</div>
<div class="col col4">
<h2>Fourth box</h2>
</div>
</div>
</body>
</html>
Conclusion
In this article, we understood how we can change layouts based on screen size in CSS media queries. We have created four boxes and adjusted their width according to screen size from 25% to 50% and then to 100% as screen size reduces.
16K+ Views
