Any idea why is this input field is not centering? CSS issue

Technical Q&A
1

Hello. I cannot for the life of me work out how to centre this input field (link to page).

Screenshot 2023-12-14 at 21.45.27.png
Screenshot 2023-12-14 at 21.45.27.png1374×922 46.5 KB

I’ve tried a number of things but have not been able to resolve it. It looks like it might be an issue with the .el-input attribute? You can see there is vacant space at the end of the area (in red below).

Screenshot 2023-12-14 at 21.47.05.png
Screenshot 2023-12-14 at 21.47.05.png2790×1332 595 KB

This is the CSS I’m using in the Shopify page:

.el-input__inner {
font-size: 24px;
font-weight: 300;
text-align: center;
width: 300px;
padding: 18px 30px;
}
.cog-content {
text-align: center;
display: block;
}
.cog-button {
font-size: 24px;
background-color: black;
color: white;
padding: 18px 30px;
text-align: center;
border: none;
margin-left: auto;
margin-right: auto;
}
.cog-field {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}

Thank you.

2

Hey @booter9898 !

You should be able to add a text-align: center CSS attribute to either the cog-input or el-input element to fix this. For example:

.el-input {
    text-align: center;
}
3

Brett. You are an absolute champion. That has fixed it. Thank you.