Single line in footer?

Hi Mikopia,

Thanks for dropping by the forum. Looking at your code, there are a few things you might want to try. Your social icons seem to have a display of inline-block. You might want to set signup form also to display inline-block.

Example

#mc_signup {
  display: inline-block;

This should line up the signup form and the other elements in your footer. Some other adjustments will have to be made to the signup form so it all aligns.

Something else you might want to try is removing the styling and width that’s added to the submit button. So it only has a margin-top, add the margin-top to account for the field label(Email Address). The submit button can be targeted by using the #mc_signup_submit css id.

I would also suggest referring to our css cheatsheet in the plugin settings for other css classes/id to use to customize the form.

Have a great day!

mc_dominic

Thank you so much. I’m *almost* there!

I’ve tried any sort of coding to remove the “Email Address” text, so that it’s just the email box and the subscribe button. It doesn’t look like I can do it by some simple CSS, although I hope I’m wrong.

Hi Mikopia,

On that front, you may be able to use one of these within your CSS:

#mc_signup_form .mc_var_label {
display: none;
}

or

#mc_signup_form .mc_header_email {
display: none;
}

That first option should set labels for fields in the widget to stop displaying. The second one instead should set just the email field header to stop displaying. Setting the correct label with a property of display:none should do the trick for you!

Almost complete!!
https://fredericsage.mikopia.com
So, I’ve added it on the footer fine, but when I go to WooCommerce it affects the styling of this (see any product). Is there a way to override this in some way ?

Hey Mikopia,

I took a look at your WooCommerce pages. It looks like what’s happening is the WooCommerce button CSS is overriding some of the default settings for the site which weren’t being explicitly provided within the CSS for the MailChimp button. The area to add some overrides to your CSS would be #mc_signup_submit. For instance, explicitly defining a smaller font size would drop the size of the button back to a normal size:

#mc_signup_submit {
font-size: 15px;
}

Going through and adding other desired properties there should do the trick.

I see that as well that WooCommerce is overwriting, but there are too many different items going on. I’ve tried throwing that code into the themes extra CSS code and it doesn’t allow it to overwrite WooCommerce. I know it’s a long shot, but could I provide you with my login for the webpage so you take a look? It’s such a tiny thing we would truly appreciate it.

Hey Mikopia,

We wouldn’t be able to log in on your behalf, but I’ve found that what may be going on here is WooCommerce’s CSS is getting loaded after your site’s main CSS. The trick here may be to get your theme to make sure to switch the order of those CSS files getting loaded.
This page has a suggestion for a function to paste into your WordPress theme’s functions.php file which might help here: https://bigwilliam.com/override-woocommerce-styles-semantically/

In any case, the key here seems to be either switching the order of when your CSS files get loaded, or you can try adding !important to the ends of the properties you’d like to set in your theme’s CSS for the button class (WC overriding your button class’s CSS seems to be the issue here). So adding a .button{} section to your theme’s CSS file with !important; as the ending of the properties you’re setting is a possible solution as well.

-Gabe