Editing the size of checkboxes and multiple choice "circles" in WPForms

[jere.toikka]

For my contact page https://kitaratunnitturku.com/ota-yhteytta/ I would like the checboxes to be larger than they are now. They are slightly too small for desktop use and for mobile use they are WAY too small.

I would like to edit then to be slightly bigger on a desktop site and then consideraby bigger on a mobile site.

[nabeel]

Hi Jere,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

You can add the following code in the Theme Options > CSS to make the radio buttons and checkboxes bigger:

div.wpforms-container-full .wpforms-form input[type=checkbox], 
div.wpforms-container-full .wpforms-form input[type=radio] {
    width: 20px;
    height: 20px;
}

@media screen and (max-width: 979px) {
    div.wpforms-container-full .wpforms-form input[type=checkbox], 
    div.wpforms-container-full .wpforms-form input[type=radio] {
        width: 22px;
        height: 22px;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps!

[jere.toikka]

Thank you very much! This worked as intended and it was easy to modify the values to be right. Am I right in understanding that the second code applies to mobile devices and any other device with a screen width less than 980?

[jade]

Hi Jere,

Yes, that is correct. It is a CSS media query that indicates which screen width the code will take effect.