← flaviocopes.com

How to make an element smaller or bigger with CSS

Published Jul 23 2021

⚠️⚠️ JUST A FEW HOURS LEFT to JOIN THE 2023 BOOTCAMP ⚠️⚠️

Sometimes you might have the need, especially when designing a page, to scale an item so it looks smaller, or bigger.

You can use the CSS zoom property to scale any HTML element.

Use a value < 1 to make an element smaller. For example, half the size with 0.5:

div {
  zoom: 0.5;
}

or use a value > 1 to make the element bigger, like in this case to scale it 2x:

div {
  zoom: 2;
}

Note that it does not work in Firefox, you could use -moz-transform: scale(NUMBER); instead (and if you go that route, you can use transform: scale(NUMBER); on all browsers, too).



Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site

Interested in solopreneurship?