Making a button responsive - Mobile First Grid

Hello,
Screen Shot 2023-02-16 at 12.56.31 PM

Screen Shot 2023-02-16 at 12.57.09 PM

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;
}

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?

2 Likes

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!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.