Edit responsive donation form in CSS so fields display horizontally across the page

Megan Dempsey

We are trying to condense our donation form and have fields in specific sections display more horizontally than vertically like they do now. The form is already responsive.


For example in the Donor Information section:

1. donor title, donor first name and donor last name all appear on one line, 

2. then, donor street 1 and donor street 2 display on the same line,

3. then donor city, donor state/province, donor zip/postal code display on the same line,

4. finally phone and email address display on one line


We'd like to do the same for the Payment Information section.


I've found the specific pagewrapper where the donation form styles are located (I think). I'm just not sure how to go about doing the above.


Here's a link to our donation form: https://www.gilchristcares.org/donation

Brian Mucha

<div id="payment_cc_container" class="payment-field-container">

    <h3>Credit Card Information:</h3>

    <div id="payment_typecc_type_row" class="form-row form-radio-array">...</div>

    <div id="payment_typecc_number_row" class="form-row form-text">...</div>

    <div id="payment_typecc_exp_date_row" class="form-row form-date">...</div>

    <div id="payment_typecc_cvv_row" class="form-row form-text cvv-input">...</div>

</div>


The container DIVs for the payment rows all have IDs, so it should be this easy.

#payment_typecc_number_row,

#payment_typecc_exp_date_row,

#payment_typecc_cvv_row

{ display: inline-block; width: 30%; min-width: 300px; }


You might need to experiment with the min-width, and maybe make a media-query to turn it back to rows at smaller widths.


BPM