Styling Checkboxes

Hi Jean-Philipe,

Thanks for posting to the forum. With the checkboxes in our plugin, each choice has an html <label> element and a html <input> element. Each of these choices are separated by a tag. This tag ‘breaks’ each choice to a new line. So you need to add a little css to your website to remove the and align the label and checkboxes.

To remove the break, first add this css to your website’s stylesheet.

.mc_interest br {
	display: none;
}

This should only target the < br > in the checkbox group.

Next the width of the labels needs to be set so they align. To do that, change the display of the <label> from inline to inline-block. This will allow you to set a fixed width for the label elements. That css will look something like this:

#mc_signup_form label.mc_interest_label {
	display: inline-block;
	width: 26%;
}

I used a percentage here, so it can be sort of responsive. But you can use a set px value or a min-width/max-width value. It’s up to you.

Have a great day!

I’m pretty sure I answered your reply months ago but it seems my message disappeared. Hope you will find this one. Thank you very much for these pieces of CSS code. It works like a charm.

Have a good day!