- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- 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 the layouts based on screen size in CSS, we will create a parent div and set divs in 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.
Create a Parent div
The divs on the web page is set inside a parent div −
<div class="colContainer"> <!- - Set the divs - -> </div>
The following is set to make the container i.e. the parent div behave like a table −
.colContainer:after { content: ""; display: table; clear: both; }
Set Divs in the Parent div
We have set four divs inside the parent div −
<div class="col" style="background-color: rgb(153, 29, 224);"> <h2>First col</h2> </div> <div class="col" style="background-color: rgb(12, 126, 120);"> <h2>Second col</h2> </div> <div class="col" style="background-color: rgb(207, 41, 91);"> <h2>Third col</h2> </div> <div class="col" style="background-color: rgb(204, 91, 39);"> <h2>Fourth col</h2> </div>
The width of the divs is set using the width property −
* { box-sizing: border-box; } .col { color: white; float: left; width: 25%; padding: 10px; }
Change the Layout
When the screen size gets smaller than 900px, the width is set 50% −
@media screen and (max-width: 900px) { .col { width: 50%; } }
When the screen size gets smaller than 600px, the width is 100% −
@media screen and (max-width: 600px) { .col { width: 100%; } }
Example
Let us see the complete example −
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .col { color: white; float: left; width: 25%; padding: 10px; } .colContainer: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> <h1>Changing layout on screen size using CSS</h1> <p>Resize the screen to see the below divs resize themselves</p> <div class="colContainer"> <div class="col" style="background-color: rgb(153, 29, 224);"> <h2>First col</h2> </div> <div class="col" style="background-color: rgb(12, 126, 120);"> <h2>Second col</h2> </div> <div class="col" style="background-color: rgb(207, 41, 91);"> <h2>Third col</h2> </div> <div class="col" style="background-color: rgb(204, 91, 39);"> <h2>Fourth col</h2> </div> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google