these button should adapt dynamically to my website if it is a tablet or mobile screen size. At the moment it is cropped very ugly as you can see here, but I can't think of a solution.

#signup  input {
font-size: 16px;
border: 3px;
border-radius: 5px;
height: 40px;
width: 300px;
text-align: center;}

#signup .button {
font-size: 16px;
padding: 10px 20px 20px 20px;
border-radius: 5px;
margin: 0 auto;
width: 300px;
background-image: linear-gradient(to right, #008A74 , #9f0f44);}

May it is very easy, but I can't figure it out. Many thanks in advance!

King regards, cookiesla

CodePudding user response：

I don't think it has anything to do with your input or .button CSS. Looks like the container (#signup?) is being restricted in width. Try opening dev tools in your browser and inspect computed properties for #signup.

CodePudding user response：

@media only screen and (max-width: 400px) {
    #signup .button {
        width: auto;
    }
}