Footer CSS Not Displaying On Homepage Only

[whitemedia]

Hi,

At the bottom right of my footer I have an embedded Mailchimp form. The form has some custom CSS embedded within it. However, there is strange behaviour on the homepage. This behaviour does not happen on any other page though.

I have five different layouts of the footer to suit each breakpoint. The problem occurs in all of them.

Within the embedded form, you will find the Mailchimp embed code. Line 5 of the code is where the problem occurs:

#mc-embedded-subscribe {height: 50px !important; font-size: 16px !important; font-family: "Playfair Display", serif !important; color: #000000 !important; background: #93ccea !important; text-shadow: none !important; width: 100% !important;}

The background color does not display on the homepage. I cannot find anything obvious conflicting with the CSS in the embedded form. Can you see any reason why the button does not have the correct background color?

Thanks,
Christopher

[prakash_s]

Hello @whitemedia,

Thanks for writing to us.

I checked your site it seems that it is coming from your custom CSS code. Please have a look at the given screenshot below.

I went ahead and check your global block it seems that you added custom CSS code there.

Thanks

[whitemedia]

Thanks @prakash_s, that has identified the source of the problem

I have got around the initial issue by changing the ID (#) in the CSS and switching it to a Global Block ([cs_gb name=“sign-up-section-2”]). However, I have now hit a different problem as a result.

The global block’s contents (sign-up form) are no longer 100% width of the container it sits in

Thanks,
Christopher

[marc_a]

Hi @whitemedia,

Since the Global block element container is not full width, we need to force the Global block element to make it 100% width. To do that, we need to add a CSS code in the Global block element inline CSS.

$el {
  width: 100%;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[whitemedia]

Thank you. That has worked well!

[tristup]

Hi @whitemedia,

Glad that it works for you.

Thanks