Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Changing Layouts Based on Screen Size using CSS

CSS Web Development Front End Technology

To change layouts based on screen size in CSS, we use Media Queries to create responsive designs that adapt to different devices such as tablets, mobiles, and desktops. This technique allows us to modify element dimensions and positioning based on screen breakpoints.

Syntax

@media screen and (max-width: breakpoint) {
    selector {
        property: value;
    }
}

Steps to Change Layouts Based on Screen Size

We will follow these steps to create a responsive layout −

  • Create a container div and wrap child elements inside it
  • Set initial width values for larger screens
  • Use media queries to adjust widths at different breakpoints
  • Apply clearfix to handle floating elements properly

Example: Responsive Four-Column Layout

This example demonstrates a layout that changes from 4 columns to 2 columns to 1 column based on screen size −

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
        * {
            box-sizing: border-box;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .col {
            color: white;
            float: left;
            width: 25%;
            padding: 15px;
            text-align: center;
        }
        .col1 { background-color: #991de0; }
        .col2 { background-color: #0c7e78; }
        .col3 { background-color: #cf295b; }
        .col4 { background-color: #cc5b27; }
        
        .container::after {
            content: "";
            display: table;
            clear: both;
        }
        
        /* Tablet view: 2 columns */
        @media screen and (max-width: 900px) {
            .col {
                width: 50%;
            }
        }
        
        /* Mobile view: 1 column */
        @media screen and (max-width: 600px) {
            .col {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h3>Responsive Layout Example</h3>
    <p>Resize your browser window to see the layout change.</p>
    
    <div class="container">
        <div class="col col1">
            <h2>Column 1</h2>
            <p>This is the first column</p>
        </div>
        <div class="col col2">
            <h2>Column 2</h2>
            <p>This is the second column</p>
        </div>
        <div class="col col3">
            <h2>Column 3</h2>
            <p>This is the third column</p>
        </div>
        <div class="col col4">
            <h2>Column 4</h2>
            <p>This is the fourth column</p>
        </div>
    </div>
</body>
</html>

Four colored boxes arranged horizontally on large screens (desktop), two boxes per row on medium screens (tablet), and stacked vertically on small screens (mobile). The layout adapts automatically as you resize the browser window.

Breakpoints Explanation

Screen Size Max Width Columns Column Width
Desktop > 900px 4 25%
Tablet ≤ 900px 2 50%
Mobile ≤ 600px 1 100%

Conclusion

Media queries provide an effective way to create responsive layouts that adapt to different screen sizes. By setting appropriate breakpoints and adjusting element widths, you can ensure your content looks great on all devices.

Updated on: 2026-03-15T15:03:45+05:30

17K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements