• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Max-width Quiz

Q1: What does max-width do in CSS?

A. Sets the exact width of an element
B. Sets the minimum width
C. Sets the maximum width an element can be
D. Sets padding

Q2: What happens if the content is smaller than max-width?

A. Content breaks
B. Element grows beyond max-width
C. Element shrinks to content size
D. The layout breaks

Q3: What is the best use of max-width?

A. Creating fixed layouts
B. Creating responsive layouts
C. Styling text
D. Adding borders

Q4: What is the result of width: 100%; max-width: 1200px;?

A. Width will always be 1200px
B. Width will never go above 1200px
C. Width will always be 100px
D. Width is fixed

Q5: Which of the following is a valid CSS rule?

A. max-width = 800px;
B. maxwidth: 800;
C. max-width: 800px;
D. max-width: 800;

Q6: How to restrict an image from exceeding its container’s width?

A. max-height: 100%;
B. max-width: 100%;
C. width: auto;
D. min-width: 0;

Q7: Which is true about max-width and width together?

A. width overrides max-width
B. max-width overrides width if width exceeds max
C. They cannot be used together
D. Causes an error

Q8: What does max-width: 100%; usually imply?

A. Fixed 100% size
B. Allows flexible shrinking
C. Border of 100px
D. Padding of 100px

Q9: Which layout pattern uses max-width effectively?

A. Grid layout only
B. Fixed-width layout
C. Responsive layout
D. Floating layout

Q10: What happens if no max-width is specified?

A. Width is 0
B. Element auto-resizes
C. Element may stretch indefinitely
D. Width is 100vw
← Previous Next →
Login
Go Back Top