Align radio buttons with other form's fields

  • Dear customer support,

    i’m using the contact form to show some text fields and 3 options with radio button.
    Unfortunately the radios are not align with the border of the other fields.

    To be clear, it is shown in the screen shot at this link

    https://it.tinypic.com/r/fkbpn9/9

    The word “lunch” should be aligned with the word “date” and the radio of the “dinner” should be aligned with the border of the label of the date…

    I’m writing it this way:

    [radio radio-223 label_first “Lunch” “Afternoon tea” “Dinner”]
    <p>Date</p>
    [date* date-71 id:Date date-format:dd/mm/yy min-date:today first-day:1 change-month]

    What is the best way to fit this?

    Thank you

    https://www.ads-software.com/plugins/contact-form-7/

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

  • see https://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/

    also see Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.

    If you find you need more detailed advice, after reading and working through the above link, please include a link to your Contact Form 7 form, so others here can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements and provide you with a possible solution.

    Thread Starter marco3253

    (@marco3253)

    Thank you for your answer,

    I tried as below:

    span.wpcf7-list-item {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

    this is working because i can see the difference, now there is no margin on the left so it is aligned with the word “date”.

    The only thing i’m not able to do is to stretch the entire content into the row.
    I tried with:
    text-align: center
    list-item: stretch
    and others…
    the best thing would be having the three elements like a table in a 33% align left cell of the space each one, because stretching would be like having stretched words..

    unfortunately the website is still closed, now there is a welcome page, is there any other advice you can give me before opening it?

    Thank you.

    Please include a link to your Contact Form 7 form so we can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Align radio buttons with other form's fields’ is closed to new replies.