Responsive Layout

.container {
    width: 100%;
    max-width: 1200px;
}

Technique	Description	Example
width: 100%	Makes elements flexible	width: 100%;
max-width	Prevents excessive stretching	max-width: 1200px;
Flexbox	Creates flexible layouts	display: flex;
Grid	Creates responsive grids	display: grid;
Media Queries	Applies styles for specific screen sizes	@media (...)

Responsive Layout Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Layout Example</title>
    <style>
        .container {
            display: flex;
            gap: 20px;
            max-width: 1200px;
            margin: auto;
        }
        .box {
            flex: 1;
            background-color: lightblue;
            padding: 20px;
        }
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Section 1</div>
        <div class="box">Section 2</div>
        <div class="box">Section 3</div>
    </div>
</body>
</html>

css

Desktop View
Section 1 | Section 2 | Section 3

Mobile View
Section 1
Section 2
Section 3

Desktop displays sections side by side
Mobile stacks sections vertically
The layout automatically adjusts to screen size

Feature	Chrome	Edge	Firefox	Safari
Media-query layouts	1	12	1	3

Practice	Benefit
Use relative units	Better scalability
Use Flexbox/Grid	Easier responsive layouts
Use media queries	Device-specific styling
Use responsive images	Prevent overflow
Test on multiple devices	Better user experience

Syntax

Attributes

Example

Output

Browser Output

Browser Support

Notes

Responsive Images

Responsive Grid Example

Responsive Flexbox Example

Best Practices

Conclusion