[Resolved] Display CRED checkboxes in columns based on screen size

[Author]

Posts

[Jeffrey]

I am trying to style a selectboxes of a cred form,

1st, I change the items to horizontal, add

display : inline-block

2nd, I feel the select boxes too messy, then I try to divide into 4 columns. so I did add either these code

columns: 4; or columns count: 4;

everything is working well, except no responsive. I also tried to add code(just in memory) @media mix 768, using to set the columns changing to 2 or 1 when visitor use tablet or mobile devices. but it doesn't work. still no responsive
I know the best way is add a class like col-sm-3 to each items. but I don't know where I can do that? and if it is not possible, how to rewrite the css? if it is very difficult, I give up 🙂

Best regards!

[Christian Cox]

Hi, unfortunately there is not a way to add CSS classes arbitrarily to each checkbox option in a CRED field. The only way I know how to do that would be to use JavaScript, like jQuery, to manipulate the DOM and add classes to each list item. If you have this CRED form available online, I can take a look and see if I can recommend another approach using only CSS. Let me know where to find the form.

[Jeffrey]

Thank you Christian, that is a user form, so you have to log into an user account. I have register an account, you can log into the account and see the page hidden link through username toolset02, password 1324 .

[Christian Cox]

I think the inline element style you applied in the inspector was overriding the media query style. I'm not exactly sure what you're trying to accomplish, but it's definitely possible to specify different column counts for different screen dimensions. For example, add something like this in your CSS:

.wpt-form-set-checkboxes.wpt-form-set-checkboxes-wpcf-sport {
    columns: 2;
}

@media screen and (min-width: 960px) {
       .wpt-form-set-checkboxes.wpt-form-set-checkboxes-wpcf-sport {
         columns: 4;   
      }
}

.wpt-form-set-checkboxes.wpt-form-set-checkboxes-wpcf-sport li {
    display:block;
}    

You will see the sport checkboxes appear in 4 columns at 960px+ and 2 columns below 960px.

[Jeffrey]

Done! Thank you so much for the help Christian! 🙂