Center Aligning Field

Support
1

I’m trying to center align a field but I’m having trouble when the page scales down to a smaller width view, such as on mobile. My css is:

.center {
  margin-left: 25%;
  margin-right: 25%;
  width: 50%;
}

This works great on desktop, but on mobile it scales down the field too much. When on a smaller view, I’d like the margins to disappear and the field to fill the space. Any suggestions as to how to accomplish this?

Capture

2

I was able to solve this by adding the following:

@media screen and (max-width: 1000px) and (min-width: 900px) {
    .center {
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }
}

@media screen and (max-width: 899px) and (min-width: 700px) {
    .center {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media screen and (max-width: 699px) and (min-width: 600px) {
    .center {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media screen and (max-width: 599px) and (min-width: 500px) {
    .center {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media screen and (max-width: 500px) {
    .center {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}
3

This can be solved better with a max width and Mauro auto on the x axis

In TW it is
max-w-md mx-auto