www.kotak.com - Checkboxes are displayed misalign

[webcompat-bot]

URL: https://www.kotak.com/811-savingsaccount-ZeroBalanceAccount/811/ahome-mobile.action?Source=Existingclientsal

Browser / Version: Firefox Mobile 77.0 Operating System: Android Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are overlapped Steps to Reproduce: Check mark boxes are misalignment

View the screenshot

Browser Configuration

• None

Submitted in the name of @mohan123

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note:

1. The issue is not reproducible on Chrome.
2. Also reproducible on Firefox Nightly desktop.

Affected area:

<label class="input-checkbox-element" for="pep">
    <div class="d-f align-items-start">
        <div class="w-20 mt-4">
            <input type="checkbox" name="pep" id="pep">
                <span class="input-checkbox-button "></span>
        </div>
        <p class="flex-1 ff-roboto-regular fz-13 lh-21 c-757575">I am not a Politically Exposed Person
        </p>
    </div>
</label>

Tested with: Browser / Version: Firefox Preview Nightly 200603 (🦎 780a1-20200529095426) Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels, 19:9 ratio (~432 ppi density), Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

/* project_behaviours.css | https://www.kotak.com/811-savingsaccount-ZeroBalanceAccount/811-mob-1/css/project_behaviours.css */

.input-checkbox-element .input-checkbox-button {
  display: block;
}

This will fix it. Moving to needscontact.