How to make text inside a button scale horizontally to page?

Question

enter image description hereText inside button is extending outside of the button. Is there anyways I can make the text scale based on the button/screen size? I already tried doing auto and searching youtube and google. Also used media query.

I already tried doing auto and searching youtube and google.

@media(min-width: 400px) {
    .purplebutton {
        min-width: 350px;
    }
    .buttontext {
        font-size: 16px;

    }
}
@media(min-width: 600px) {
    .purplebutton {
        min-width: 450px;
    }
    .buttontext {
        font-size: 17px;

    }
}

@media(min-width: 800px) {
    .purplebutton {
        min-width: 550px;

    }
    .buttontext {
        font-size: 20px;

    }
}

Expected result is the text to fit inside the button and size of font adjust according.

Actual result is the text extends outside the button

can you add html/jsx for the elements that are having a problem — Danyal Imran, Jan 21 '19 at 18:09
Possible duplicate of https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Ganapati V S, Jan 21 '19 at 18:40
Possible duplicate of [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — mbj, Jan 21 '19 at 21:10

score 0 · Accepted Answer · answered Jan 21 '19 at 18:10

0

Instead of using absolute scaling units (px) for font-size use relative scaling font-size such as em, rem or vw.

answered Jan 21 '19 at 18:10

Danyal Imran

2,515
13
21

score 0 · Answer 2 · answered Jan 21 '19 at 21:10

0

Try using word-break property to the button like this word-break: break-all;

answered Jan 21 '19 at 21:10

Shivakumar H.G

114
2
8

How to make text inside a button scale horizontally to page?

2 Answers2