Change size of Email Form input box

[tashera]

I’ve managed to do everything I wanted except make the input box the same size as my submit button. I’ve attached a reference for the look I was going for. How can I get my input box to look like this?
Thanks in advance!

[ruenel]

Hello Tashera,

Tanks for posting in! Are you using the Email Form shortcode? If that is the case, kindly check out this thread to change the width of the form columns or just the email input field.

• Crafty - CSS for Mail Form in Footer

We would love to know if this has worked out for you.

[tashera]

Down below is the code I already have. When I add the one from the link given to this the input bar is still to thick, which is really all I’d like to adjust.

.subscribe-header .tco-subscribe-form select, .tco-subscribe-form input[type=“text”], .tco-subscribe-form input[type=“email”] {
margin-bottom: 0px; font-size: small; font-family: times new roman;
}
.subscribe-header .tco-subscribe-form input[type=“submit”] {
line-height: 6px;
margin-top: 0px !important; margin-right:-5px; margin-left:5px
}
.subscribe-header .tco-subscribe-form fieldset {
display: inline;
}

This is what shows with the code I already have

[prakash_s]

Hi Tashera,

Sometimes the only screenshot does not help us to diagnose the error, to get into the issue we need to examine the exact page URL.

There might be some padding or height value and you need to decrease those values. As you have given the custom CSS code that you are using I think if you want to match the height of the submit button with the input field. You can increase the value of line-height up to 20px. it might be fixed your issue.

Try this

.subscribe-header .tco-subscribe-form input[type=“submit”] {
line-height: 20px;
margin-top: 0px !important; margin-right:-5px; margin-left:5px
} 

Here is tutorial of padding and height
https://www.w3schools.com/css/css_padding.asp
https://www.w3schools.com/cssref/pr_dim_height.asp

Please note that the purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Thanks

[tashera]

Sorry, I don’t want to increase the submit button height, I would like to decrease the input box height, where you type in your email address. The screenshot and me show the code I used was just to show that the submit button is the size I’d like everything to be in.

thank you

[marc_a]

Hi @tashera,

I check your website and I see that there is some define height in your email address input box, to decrease the height of your email input box please update your CSS code.

.subscribe-header .tco-subscribe-form select, .tco-subscribe-form input[type=“text”], .tco-subscribe-form input[type=“email”] {
	margin-bottom: 0px; 
	font-size: small; 
	font-family: times new roman;
	height: 27px;
}

Just change the value of height to your desire height.

Hope that helps.

Thank you.