# How to fix button text overflowing button **URL:** \ **Category:** Curriculum Help\ **Tags:** css, html\ **Created:** [August 1, 2021, 4:52pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883 "2021-08-01T16:52:33Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 1, 2021, 4:52pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/1 "2021-08-01T16:52:33Z")
![image](https://global.discourse-cdn.com/freecodecamp/original/3X/4/5/4518fdb077f36f3b1523bc08ec9c14673bd2292c.png) I don’t know why the button doesn’t just, increase in size to contain the larger text. How can I make it happen? Thank you very much!! ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 1, 2021, 4:54pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/2 "2021-08-01T16:54:44Z")
> [@gururajankappa](#): > > How can I make it happen? Make the button bigger to accommodate the text. ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 1, 2021, 4:55pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/3 "2021-08-01T16:55:13Z")
> [@gururajankappa](#): > > Make the button bigger Not manually calculating. ---
**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\ **Post date:** [August 1, 2021, 4:56pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/4 "2021-08-01T16:56:28Z")
We can’t really give you good help unless we can see the project. ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 1, 2021, 4:56pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/5 "2021-08-01T16:56:54Z")
Ok let me post it. sry ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 1, 2021, 4:58pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/6 "2021-08-01T16:58:37Z")
```auto Flipkart ``` ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 1, 2021, 5:01pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/7 "2021-08-01T17:01:52Z")
Here’s the live website with the code :- [quirky-ptolemy-v3ebd - CodeSandbox](https://codesandbox.io/s/quirky-ptolemy-v3ebd?file=/index.html) ---
**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\ **Post date:** [August 1, 2021, 5:16pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/8 "2021-08-01T17:16:44Z")
The vertical height a line of text takes up is not just the font size but also the line height. You’ve set the font size for the button to 25px but most browser’s set the default line height to more than 1 (I believe it is something like 1.2), so the amount of vertical space the text takes up is more than 25px (assuming 1.2 line height then it would take up 30px). You’ve set your button height to 30px so the button text is exactly as tall as the button itself but then you have also added 5px of top padding to the button which is pushing the button text down and thus it is overflowing the bottom of the button. I’ll leave it up to you as to how you want to solve this but I will suggest that you might want to reconsider using `px` units for height and instead go with something like `em` (or `rem`), which is much more responsive. ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 2, 2021, 1:39pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/9 "2021-08-02T13:39:41Z")
Thanks a lot it really helped!! I set line-height to 1 and it solved the problem! Thanks a lot! ---
**Author:** ![gururajankappa](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gururajankappa/32/227426_2.png) [@gururajankappa](https://forum.freecodecamp.org/u/gururajankappa)\ **Post date:** [August 2, 2021, 1:40pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/10 "2021-08-02T13:40:14Z")
> [@bbsmooth](#): > > `px` units for height and instead go with something like `em` (or `rem` ), which is much more responsive. ok. But what do rem and em mean? ---
**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\ **Post date:** [August 2, 2021, 4:25pm UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/11 "2021-08-02T16:25:33Z")
[Understanding em Units in CSS](https://www.impressivewebs.com/understanding-em-units-css/) ---
**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\ **Post date:** [February 1, 2022, 4:26am UTC](https://forum.freecodecamp.org/t/how-to-fix-button-text-overflowing-button/471883/12 "2022-02-01T04:26:28Z")
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.