Pro Email Forms inline-block Field Size

Support
#1

I have aligned a Pro Email Form to be an inline-block. However I cannot get the email input field to be 80% width of the page and the submit button 20% page width. Below is the CSS in current use (in the Pro footer itself).

.sign-up-form .tco-subscribe-form {
   width:100%;
}

.sign-up-form .tco-subscribe-form fieldset {
    min-width: 0;  
    display: inline-block;
    vertical-align:middle;
}

.sign-up-form .tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
   margin-bottom:0;
}

.sign-up-form .tco-subscribe-form input[type="submit"] {    
  margin-top:0;
  margin-left: 10px;
}

How can I get the two elements to be the width I would like?

Thanks,
Christopher

#2

Hello Christopher,

Thank you for the very detailed post information.

Please have your code updated and use this:

.center-container  {
	min-width: 600px;  
}

And then you set a minimum width for the email field as well:

.sign-up-form .tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
   margin-bottom:0;
  min-width: 350px;
}

I have applied the above css code in your footer. Please check your site now.
Feel free to change the values if necessary.

#3

Thank you RueNel, That perfect and really helps!

#4

We’re glad that helped.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.