Question posted in
The full documentation can be found here.

Divi theme – 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! 🙂

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search