How to fix a Double Opt-In Box Display Issue

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.

1. Revert templates

   • Navigate to Manage → Templates, and revert the Piano ID Layout and Piano ID Digital Code templates to default.

2. Modify the CSS

   • Add the following CSS code to the CSS tab of the Piano ID Layout template:

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

Last updated: June 26, 2026