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 Column Width Based on Screen Size using CSS
To change the column width based on screen size, use media queries. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc.
First, set the div −
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
Set the Initial Width
To set the width of the above div, use the width property in CSS −
.sample {
width: 50%;
background-color: lightblue;
height: 200px;
font-size: 18px;
}
Change the Column Width
Now, to change column width on the basis of screen size, set the width to 100% −
.sample {
width: 100%;
}
When the screen size gets smaller than 700px, the width is 100% −
@media only screen and (max-width: 700px) {
body {
margin: 0;
padding: 0;
}
.sample {
width: 100%;
}
}
Example
The following is the code to change the column width based on screen size −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
width: 50%;
background-color: lightblue;
height: 200px;
font-size: 18px;
}
@media only screen and (max-width: 700px) {
body {
margin: 0;
padding: 0;
}
.sample {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Changing column width based on screen size</h1>
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
<p>Resize the browser window to 700px and below to see the above div width change to 100%</p>
</body>
</html>
Updated on: 30-Oct-2023
3K+ Views
Advertisements