• Resolved danihu

    (@danihu)


    Hello. On smartphones and smaller screens the second line of the checkbox text is starting on the left right below the checkbox. How can I align the second line so that it is left-aligned to the first one? Thank you in advance.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hello @danihu,

    Thanks for contacting us!

    To do what you mentioned we need some custom CSS, which I’ve included here:

    @media only screen and (max-width: 600px) {
      div.wpforms-container-full .wpforms-form input[type=checkbox] {
        float: left;
    }
    
    div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
        margin-left: 30px;
        display: block;
    }
    }

    And in case it helps, here’s a great tutorial from WPBeginner on how to add custom CSS like this to your site: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    I hope this helps! When you’ve had a chance to give this a try, could you please let me know if this works for you?

    Thanks! ??

    Thread Starter danihu

    (@danihu)

    Hello Prasant. Thank you so much. Yes it works fine. I have one additional question: With reduced screen width, the baseline of the text moves down. Can this be corrected? I made a screenshot https://www.danielhurter.ch/screenshot-form01.jpg . Thank you once again.

    Hello @danihu,

    When you have sometime, could you please give some more details when you say “the baseline of the text moves down”? I looked at the screenshot you’ve shared, so I’d like to clarify first before I inadvertently guide you in the wrong direction.

    Thanks, and please let me know!

    Thread Starter danihu

    (@danihu)

    As you can see on the screenshot, as smaller the space (screen) as more the lines move downwards compairing to the checkbox. Originally the text line and checkbox are more or less on the same base line.

    Thread Starter danihu

    (@danihu)

    Thread Starter danihu

    (@danihu)

    I am sorry, but in certain width the second line is still left aligned to the checkbox, as you can see https://www.danielhurter.ch/screenshot-form02.jpg

    Hello @danihu,

    When you have sometime, please try adding following CSS & let me know how it goes:

    @media (min-width: 600px) and (max-width: 950px) {
      div.wpforms-container-full .wpforms-form input[type=checkbox] {
        float: left;
    }
    
    div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
        margin-left: 30px;
        display: block;
    }
    }

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Checkbox multiline text’ is closed to new replies.