Making a button responsive - Mobile First Grid

[marid]

Hello,

I’m working on a FEM project using Grid. Everything seems to be falling into place in terms of responsiveness, aside from the button.

I’ve previously added width which did not help. When the screen is minimized, the “Sign up” text stacks on top of each other, and the padding of the button increases, making the button larger.

When the screen is at its full width, there’s no issue. It appears that the site is responsive, but the button is not included in the responsiveness.

Is there a way to fix this?

Top image is when screen is reduced.
Bottom image is when the screen is bigger.

button {
    padding: 13px 90px;
    background-color: var(--Yellow);
    color: var(--White);
    font-weight: 700;
    border: none;
    border-radius: 3px;
    font-size: 0.75rem;
    margin: 15px auto 0 auto;
}

[bbsmooth]

@marid

padding: 13px 90px;

Do you see that as the button narrows the side padding will stay the same and thus you will have less room for the text? Maybe you don’t need that much side padding?

[marid]

You were absolutely right. I’m not sure why I added a ton of side padding instead of applying a width first. It works now.

Thanks for making it clear!