Skip to content

How to make an element smaller or bigger with CSS

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).

β†’ Download my free CSS Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about css: