Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Changing Column Width Based on Screen Size using CSS
To change the column width based on screen size, use CSS media queries. Media queries allow you to apply different styles for different devices and screen sizes such as tablets, mobiles, and desktops.
Syntax
@media only screen and (max-width: value) {
selector {
width: value;
}
}
Setting Initial Column Width
First, create a column element and set its initial width using the width property −
<!DOCTYPE html>
<html>
<head>
<style>
.column {
width: 50%;
background-color: lightblue;
height: 150px;
padding: 20px;
font-size: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="column">This column is 50% wide on desktop screens</div>
</body>
</html>
A light blue column taking 50% of the screen width with padding and text content appears on the page.
Responsive Column Width with Media Queries
Now, use media queries to change the column width when the screen size becomes smaller than 700px −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.column {
width: 50%;
background-color: lightblue;
height: 150px;
padding: 20px;
font-size: 16px;
box-sizing: border-box;
margin-bottom: 10px;
border-radius: 5px;
}
@media only screen and (max-width: 700px) {
.column {
width: 100%;
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h2>Responsive Column Width</h2>
<div class="column">This column is 50% wide on screens larger than 700px, and 100% wide on smaller screens.</div>
<p><strong>Resize your browser window to see the width change!</strong></p>
</body>
</html>
A responsive column that appears light blue and 50% wide on larger screens, changing to light green and 100% wide when the browser width is reduced below 700px.
Multiple Breakpoints Example
You can use multiple media queries to create different column widths for various screen sizes −
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-column {
width: 25%;
background-color: coral;
height: 120px;
padding: 15px;
margin: 10px 0;
box-sizing: border-box;
text-align: center;
}
/* Tablet view */
@media only screen and (max-width: 768px) {
.responsive-column {
width: 50%;
background-color: lightcyan;
}
}
/* Mobile view */
@media only screen and (max-width: 480px) {
.responsive-column {
width: 100%;
background-color: lightpink;
}
}
</style>
</head>
<body>
<div class="responsive-column">
Desktop: 25% width<br>
Tablet: 50% width<br>
Mobile: 100% width
</div>
</body>
</html>
A column that changes width and background color based on screen size: coral at 25% width (desktop), light cyan at 50% width (tablet), and light pink at 100% width (mobile).
Conclusion
CSS media queries provide an effective way to create responsive column layouts. By setting different width values at various breakpoints, you can ensure your content displays optimally across all device types.
Updated on: 2026-03-15T15:10:42+05:30
4K+ Views
Advertisements