Email Form Not Sizing Correctly Using Global Blocks

[guybower1]

I have a Mailchimp email form setup and have tried different widths in the email form setup itself, using both 250px and 100%; the changes seem to reflect when I view it in Global Blocks, but nothing changes in the footer builder. The footer has 3 columns each 33.33% width. There is no padding set, yet the email form is always only a small fraction of the width of the column container. Is there any reason it will not use the available space?

regards

[ruenel]

Hello @guybower1,

Thanks for writing in!

By default, there is no define width for the global block or the email forms. To get this resolve, I have edited your footer and then I set a minimum width for your global block.

• 

I have inserted this custom inline element css:

$el {
  min-width: 300px
}

Please check your footer now.

[guybower1]

Thanks so much for helping Ruenel

I was under the impression that the max width set in Email Forms should have handled it, but I guess there is no set minimum there. Can I then safely assume there is not much point in setting much in the way of margins, padding or width parameters in the actual Email Forms section? It can all be done in whatever container it is going into; is that more how it would be handled?

Does that also apply to things like bolding the text on a button like the submit button?

One thing that is odd Ruenel, is that I set a hover colour for the submit button. it works when viewing it in Global Blocks, but does not seem to work when viewing it in the Footer section. Is that normal?

I did have some CSS which worked in X to format the email form. I changed the x form reference to the tco_subscribe one and find it does nothing at all. This is what was originally formatting the form in x

.tco-subscribe input[type="text"], .tco-subscribe input[type="email"] {
    border: 1px solid #ccc5c5 !important;
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-family: Lato, sans-serif;
    letter-spacing: 1px;
    text-align: left;
}
/* fixes mailchimp form */
.tco_subscribe input[type="submit"] {
    text-shadow: none !important;
    border-radius: 5px !important;
    background-color: #000 !important;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    font-family: Lato, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    padding-top: 10px;
}

[friech]

Hi @guybower1,

Yeah, that is correct, the form is responsive it will adapt its container width, as long as it does not reach its set max-width. But please note that Footer’s Bar and Container is powered by Flexbox (A Complete Guide to Flexbox), so the elements that are display:block (like the global block) might not behave as you’ve expect it would be.

I think the class that you’re looking for is .tco-subscribe-form

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

[guybower1]

Thanks so much for your reply, Friech

Apologies, I got the impression that you set the class yourself in the Email Forms section

That’s why I used tco_subscribe in my CSS.

Thanks for the links to those resources. The code I supplied was what was formatting the email form in X, before the upgrade to pro

Regards

[christian]

You’re welcome, @guybower1.