Docs

[jane_pattinson]

Hi Themeco,

I have installed and implemented a mailchimp sign up form on a section called footer. I have made some customisations to the form such as making it inline, however I can’t seem to change the width of the email field even though there seems to be plenty of space.

We can provide website and login details in a non public post.

Many thanks,

Jane

[Prasant Rai]

Hello Jane,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[jane_pattinson]

This reply has been marked as private.

[jane_pattinson]

This reply has been marked as private.

[jane_pattinson]

This reply has been marked as private.

[jane_pattinson]

This reply has been marked as private.

[Paul R]

Hi,

I have tried all but none of it works.

Kindly check again and let us know.

Thanks

[jane_pattinson]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for providing the information. Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(min-width: 980px){
  .x-section .x-container.marginless-columns .x-container .x-column.x-sm.x-1-1 {
    width: 80%;
    display: block;
  }

  .x-section .x-container.marginless-columns .x-container .x-column.x-sm.x-1-1 .x-subscribe-form {
    max-width: 100% !important;
    width: 100% !important;
  }

  .x-section .x-container.marginless-columns .x-container .x-column.x-sm.x-1-1 .x-subscribe-form fieldset:first-of-type {
    width: 68%;
  }

  .x-section .x-container.marginless-columns .x-container .x-column.x-sm.x-1-1 .x-subscribe-form fieldset:last-of-type {
    width: 30%;
  }
}

And you should have something like this: http://prntscr.com/ec99gh

Hope this helps.

[jane_pattinson]

This reply has been marked as private.

[Rue Nel]

Hello Jane,

Thanks for updating in! If you want something like this?

If that is the case, you can make use of this code:

.x-subscribe-form input[type="submit"] {
    margin-top: 0;
}

.x-subscribe-form input[type="email"] {
    height: 38px;
}

Please keep in mind that the best css practice would be like this:

element {
  //some styling
}

.element-class  {
  //some styling
}

#element-ID{
  //some styling
}

@media(max-width: XXpx){
  element {
    //some styling
  }

  .element-class  {
    //some styling
  }

  #element-ID{
    //some styling 
  }
}

The @media css block should always appear last to avoid any conflict.

Hope this helps.

[jane_pattinson]

This reply has been marked as private.

[jane_pattinson]

Many thanks that fixed it. Now I am looking to change the color/colour of the form title to white or a lighter color as it is on a black background.

I read this post https://community.theme.co/forums/topic/styling-mailchimp-sign-up-form/

However this didn’t work. I have also add the form within a section – so wondering if that is not its own container or it would be difficult to determine the container it is in.

Are you able to help me with the CSS to change the form title’s font colour?

Many thanks,

Jane

[Rue Nel]

Hello Jane,

Thanks for updating in! To change the color of the mailchimp sign up form, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-subscribe-form h1 {
    color: #fff;
}

Hope this helps. Kindly let us know.

[Author]

Posts