Column width in %

  • Resolved danihu

    (@danihu)


    5 years, 1 month ago

    Hello. I have now 3 columns for the checkbox area. How can I define the column width in percentages. Due to the different text lengths it looks not professional now. If I can define the width in %, I could adjust them precisely. Thank you in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jade

    (@jadeam)

    5 years, 1 month ago

    Hi @danihu,

    Thanks for writing in!

    You will need to add some custom CSS on your site to do that. Please try this code:

    div.wpforms-container-full .wpforms-form .wpforms-list-3-columns ul li {
    width: 30% !important;
}

    Please feel free to change the value of the width in the code above.
    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter danihu

    (@danihu)

    5 years, 1 month ago

    Hi Jade. This was not what I am looking for. Is it possible to define each of the three columns by different values, e.g. 45% 30% 25%? Thank you again.

    Jade

    (@jadeam)

    5 years, 1 month ago

    Hello @danihu,

    Thanks for clarifying.

    To do that, please add the class customized-three-columns to your checkbox field then add this CSS code on your site:

    div.wpforms-container-full .wpforms-form .wpforms-field-checkbox.customized-three-columns ul li {
    display: inline-block;
    margin: 0 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox.customized-three-columns ul li:nth-child(3n+1) {
    width: 45%;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox.customized-three-columns ul li:nth-child(3n+2) {
    width: 30%;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox.customized-three-columns ul li:nth-child(3n+3) {
    width: 25%;
}

    I hope this helps!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Column width in %’ is closed to new replies.