• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Max-width

← Previous Next →

🔹 What is max-width in CSS?

The max-width property in CSS defines the maximum width an element can grow to, preventing it from becoming too wide, especially on large screens.

It is commonly used for responsive layouts.

🔸 Syntax

element {
  max-width: 600px;
}

This means: the element can grow up to 600px, but no more.

🔸 Common Units for max-width

  • px – pixels (fixed size)

  • % – relative to parent element

  • em, rem – relative to font size

  • vw – relative to viewport width

🔸 Default Behavior (No max-width)

By default, block-level elements like <div> stretch to 100% of their parent’s width.

Setting max-width can help limit this behavior:

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

✅ This creates a responsive, centered layout.

🔸 max-width vs width

Property Behavior
width Fixed width
max-width Maximum limit; can shrink below
min-width Minimum limit; cannot go below

🔸 Responsive Design Use

img {
  max-width: 100%;
  height: auto;
}

✅ Makes images resize within their containers and prevents overflow.

Practice Questions

Q1. Set the max-width of a <div> to 800px.

Q2. Make sure a <section> element doesn’t grow beyond 90% of the page width.

Q3. Set width: 100% and max-width: 1000px to create a responsive container.

Q4. Limit an image to a maximum width of 100% of its container.

Q5. Prevent a button from exceeding 200px in width.

Q6. Apply max-width: 500px using a class .content-box.

Q7. Write a media query that applies max-width: 700px on screens wider than 768px.

Q8. Use max-width in a flex container to keep items from stretching too far.

Q9. Write a rule to limit the maximum width of a form to 600px.

Q10. Use inline CSS to set max-width of a div to 400px.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top