fix: improve form layout when title enabled

[kakshak]

User Story

As a user, I want to display proper layout for personal info of donation form in mobile deive so that can easily understand all the fields of it.

Current Behavior

I currently reload the page in my iPhone for donation page and check that the layout for personal info is not proper.

Expected Behavior

I expect to display that layout properly in all the device.

Bug Type

• This bug describes functionality that once worked as expected in version X.X.X.
• This bug describes functionality that never worked as expected.
• I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

1. Open donation form at front-side in any mobile device and check the personal Info part.
2. You can also reproduce it from trigger mobile device toolbar by inspecting the element from browser

Visuals

Acceptance Criteria

• Make sure all the layout for personal Info is proper in all the mobile device

Environment

Operating System

• Platform: iOS
• Version: 12.0.0

Browser

• Name: Chrome
• Version: 69.0.3497.100

WordPress System Info

### WordPress Environment ###

Home URL: http://givetest.local
Site URL: http://givetest.local
WP Version: 4.9.8
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
Permalink Structure: /%postname%/
Show on Front: posts
Table Prefix Length: wp_
Table Prefix Length: 3
Table Prefix Status: Acceptable
Admin AJAX: Accessible
Registered Post Statuses: publish, future, draft, pending, private, trash, auto-draft, inherit, request-pending, request-confirmed, request-failed, request-completed, refunded, failed, revoked, cancelled, abandoned, processing, preapproval

Server Environment

Hosting Provider: DBH: localhost, SRV: givetest.local
TLS Connection: Connection uses TLS 1.2
TLS Connection: Probably Okay
Server Info: Apache/2.4.10 (Debian)
PHP Version: 7.2.0
PHP Post Max Size: 1,000 MB
PHP Time Limit: 900
PHP Max Input Vars: 3000
PHP Max Upload Size: 1,000 MB
cURL Version: ❌ 7.38.0, OpenSSL/1.0.1t - We recommend a minimum cURL version of 7.40.
SUHOSIN Installed: –
MySQL Version: 5.6.34
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
gzip: ✔
GD Graphics Library: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Give Configuration

Give Version: 2.3.0
Give Cache: Enabled
Database Updates: All DB Updates Completed.
Give Cache: Enabled
Give Cache: ✔New Donation✔Donation Receipt✔New Offline Donation✔Offline Donation Instructions✔New User Registration✔User Registration Information✔Donor Note✔Email access
Upgraded From: 2.3.0
Test Mode: Enabled
Currency Code: USD
Currency Position: Before
Decimal Separator: .
Thousands Separator: ,
Success Page: http://givetest.local/donation-confirmation/
Failure Page: http://givetest.local/donation-failed/
Donation History Page: http://givetest.local/donation-history/
Give Forms Slug: /donations/
Enabled Payment Gateways: Test Donation, Offline Donation, PayPal Standard
Default Payment Gateway: Test Donation
PayPal IPN Verification: Enabled
PayPal IPN Notifications: N/A
Donor Email Access: Enabled

Active Give Add-ons

Other Active Plugins

WP System Info: by Nurul Amin – 1.2

Inactive Plugins

Easy Digital Downloads: by Easy Digital Downloads – 2.9.8
Give - Donation Upsells for WooCommerce: by WordImpress – 1.0.4
Give - Manual Donations: by WordImpress – 1.4.2
WooCommerce: by Automattic – 3.4.5
WooCommerce Quick Checkout: by WordImpress – 2.0.0
WordPress Reset: by Aristeides Stathopoulos, Matt Martz – 1.4.1

Active MU Plugins

Local by Flywheel Relative URL (for Live Links): by Flywheel – 1.0

Theme

Name: Twenty Seventeen
Version: 1.7
Author URL: https://wordpress.org/
Child Theme: No – If you're modifying Give on a parent theme you didn't build personally, then we recommend using a child theme. See: How to Create a Child Theme

[kevinwhoffman]

@kakshak Let's schedule a call to meet and look at the CSS before you begin this one. I am thinking we should detect whether the prefix field is enabled and convert that layout to a single column before it gets too squished.

[kakshak]

@kevinwhoffman Okay, I'll start this issue this week soon. So, please let me know your convenient time for a call.

[kevinwhoffman]

@kakshak I looked into this and identified the issue, which is caused by the give-title-prefix-wrap styles overriding the mobile responsive styles for the first and last name fields.

I have self-assigned to take care of this one. Thanks.