Styling

Hey Kim,

Thanks for writing in to the forum. In taking a look at the site, it looks like a lot of the styling issues are related to the container that the signup form is being placed in. While I’m not completely clear on what the desired layout is, I’d be happy to help as best I can, though this may ultimately require making changes to the container surrounding the plugin, which would then be outside of what we generally provide support with in this forum.

For the text issues, if you’re referring to the input field labels, you can target that by adding this bit of css code:

#mc_signup_form .mc_var_label {
font-size: 10px;
}

And changing the pixel value there. I noticed that the submit button’s text is a bit large and cut off too, so you can add this css code to target that:

#mc_signup_submit {
font-size: 10px;
}

Would you be able to elaborate a bit on the spacing issues you’re referring to? Also, feel free to include any other specifics that you’re looking to target/change.

-tk

so those helped somewhat, but not totally. I’m looking to reduce the vertical spacing. So above the name field make it less space so it’s closer to the field of the email one. Also can i get rid of required field wording? if not, it needs to come closer too.

https://www.motherhoodincorporated.ca/tammy/

Hey Kim,

I believe the vertical spacing you’re trying to reduce is set by the margin-bottom on the .mc_merge_var class. If so, you can reduce that by adding this to your stylesheet:

#mc_signup .mc_merge_var {
		margin-bottom: 0;
	}

The required field message can be hidden with CSS too:

-for the required field message

#mc-indicates-required {
display: none;
}

-for the asterisks beside email

.mc_required {
display: none;
}

the hiding the required field worked, thanks. the spacing code didn’t change anything? i even tried playing with the number value bigger or smaller (-10) and no change?

Hey Kim,

Would you be able to add that spacing code to your page, then post back here so I can take a look?

it is in there. the theme itself has a custom code area but i’ve also added it in the editor to the theme css file

Hey!

Thanks for the quick reply. I wasn’t able to quite locate the code. Would you be able to let me know which css file it’s in? I looked in the kickstart/theme/style.css file, but couldn’t locate it. Also, on the site, I noticed that the ‘required field’ is still visible, so I’m not quite sure if I’m looking in the right area.

Look forward to hearing back!