CODEWITHSUNDEEP
css
steph
steph

Reputation: 67

Is there any way to align checkboxes in divi contact form? Custom CSS suggestions?

Is there anyway to align the checkboxes in the divi contact form to be in three columns? I messaged elegant themes, and they don't have an option for this in their page builder settings. Would anyone be able to suggest some custom css suggestions?

Here is what I have: https://mastermclaren.com/checkboxes/

Here is what I want: (see image)

enter image description here

Any suggestions are much appreciated! Thank you for your time and advice! :)

Upvotes: 0

Views: 2065

Answers (2)

David Voráč
David Voráč

Reputation: 1431

I would recommend you to have a look on css property flex, your life will be much easier once you master it! (For example here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Main reason to choose flex for this is that you can use min-width for list items (et_pb_contact_field_checkbox) and the items will automatically shrink to 2 or 1 item per row - depending on the width (good for mobile design).

To your solution

.et_pb_contact_field_options_list {
  display: flex;
  flex-wrap: wrap; /* Allow childrens to be on next row(s) */
}

.et_pb_contact_field_checkbox {
  display: flex;
  align-items: center; /* Vertical centering of childrens inside */
  flex-basis: 33.33%; /* Gives 33.33% width (you can think of this as width property) */
  box-sizing: border-box; /* Thanks to that you can use padding without increasing it's width */
  padding-right: 15px;
  margin-bottom: 15px;
}
<span class="et_pb_contact_field_options_list">

  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>1</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>2</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>3</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>4</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>5</p>
  </span>
  
  <span class="et_pb_contact_field_checkbox">
    <input type="checkbox" />
    <p>6</p>
  </span>

</span>

Upvotes: 0

Kyle Soeltz
Kyle Soeltz

Reputation: 316

A simple CSS approach would be to add the following to the parent element containing the checkboxes. From looking at your link, it looks like you would want to apply the following styles to the .et_pb_contact_field_options_list -

.et_pb_contact_field_options_list {
   column-count: 3;
   display: block;
}

enter image description here

Alternatively you could also try CSS grid -

.et_pb_contact_field_options_list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}

enter image description here

Upvotes: 1

Related Questions