Use the guidance below to restore the Double opt-in code fields to a horizontal layout.
If the verification code input fields in the Double opt-in box are displaying vertically instead of horizontally, you can resolve this issue by following these steps.
Before you start
-
You need access to Piano ID templates.
-
Make a backup or copy of templates and CSS before changing them.
Step 1 — Revert the templates
-
Navigate to Manage → Templates.
-
Revert the Piano ID Layout and Piano ID Digital Code templates to default.
Step 2 — Add CSS to display inputs horizontally
-
Open the CSS tab for the Piano ID Layout template.
-
Add the following CSS code:
CSS
.digital-code-input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 -6px;
}
.digital-code-input input {
margin: 0 3px;
width: 35px;
height: 48px;
padding: 11px 8px;
text-align: center;
border-radius: 2px;
}
.digital-code-input input:nth-child(3n) {
margin: 0 13px 0 3px;
}
.digital-code-input input:last-child {
margin: 0 3px;
}
digital-code-input-base .digital-code-input input[type='number'] {
color: var(--code-color);
background: transparent;
border-color: var( --border-input-field);
}
digital-code-input-base .digital-code-input input[type='number']:focus{
border-color: var( --border-input-field-focused);
}
Verify the fix
-
Refresh the page with the DOI box.
-
Confirm the input fields are displayed in one row.
-
Test entering a full code.