You can make an element responsive without media queries by combining a fluid width with a fixed max-width.

.card {
  width: 90%;
  max-width: 300px;
}

The card uses 90% of the available space on small screens. On wider screens, it stops growing at 300px.

Why fixed widths break

A fixed width looks simple at first:

.card {
  width: 300px;
}

This works while the screen is wider than 300px. It can break on very small screens because the card still wants to be 300px wide.

That is why the responsive version starts with a percentage:

.card {
  width: 90%;
  max-width: 300px;
}

The percentage gives the browser room to shrink the card. The max-width keeps it from becoming too wide.

How the two values work together

Think of the two declarations as two different rules:

• width: 90% says the element should be almost as wide as its parent.
• max-width: 300px says the element should never grow past 300px.

The browser follows both rules at the same time. If 90% of the parent is smaller than 300px, the card uses the smaller value. If 90% of the parent is larger than 300px, the card stops at 300px.

For example, inside a 280px parent, 90% is 252px. The card becomes 252px wide. Inside a 600px parent, 90% is 540px, but max-width: 300px stops it at 300px.

Center the element

If the element is a block and you want it centered, add horizontal auto margins:

.card {
  width: 90%;
  max-width: 300px;
  margin-inline: auto;
}

margin-inline: auto centers the card in both left-to-right and right-to-left layouts. You can use margin-left: auto and margin-right: auto too, but margin-inline is cleaner for modern CSS.

Use box-sizing: border-box

Here is the gotcha that often gets skipped. By default, width does not include padding or border.

.card {
  width: 90%;
  max-width: 300px;
  padding: 24px;
}

Without border-box, the card’s content box is capped at 300px, then padding is added on top. The visible card can become wider than 300px.

Set box-sizing: border-box so the width includes the padding and border:

.card {
  box-sizing: border-box;
  width: 90%;
  max-width: 300px;
  padding: 24px;
}

Most projects set this globally:

*,
*::before,
*::after {
  box-sizing: border-box;
}

This makes responsive widths easier to reason about.

When to use this pattern

Use width plus max-width when one element needs to shrink on small screens and stop growing on large screens. It works well for cards, forms, images, modals, callouts, and small content blocks.

Use clamp() for fluid typography and spacing when the value should scale between a minimum and maximum. Use auto-fit with minmax() for responsive CSS Grid columns when multiple items need to create their own column count. Use responsive Flexbox cards with flex-basis and flex-grow when items should wrap as rows.

If the element also needs to keep a fixed shape, CSS aspect-ratio keeps media and cards in proportion. You can also read the full guide to responsive CSS without media queries or browse more frontend visuals and CSS examples.

Wrap-up

width: 90% lets an element shrink with its parent. max-width: 300px stops it from growing too far. Together, they solve many small responsive layout problems without a breakpoint.

For more short frontend lessons, visit WebDevVisuals.