Search code examples
checkboxwordpresscontact-form-7

contact form 7 checkboxes


I'm using the Divi theme for Wordpress and contact form 7 plugin. I have a form with 4 checkboxes. I need to align in two columns and I need them to be responsive, so that it would also appear on phones in two columns. The problem is I tried everything I know in css to make it happen, I can do it for desktop and laptop size, but cannot make it work on mobile. I tried having the checkboxes in separate divs, both having 50% of width, aligning them left and right, but they always appear one below the other just on separate sides. Can you help or give me some tips and pointers what to try? This is the website link www.debtanxiety.com


Solution

  • Wrap the checkboxes in separate containers and apply these style rules to those containers.

    .checkbox-container {
        width: 50%;
        margin: 0;
        padding: 0;
        float: left;
    }
    

    To improve the aesthetics, you could add padding and margin. Make sure, necessary adjustments are made in the width to accommodate those changes.