Newsletter subscribe input and submit mobile issues

Here’s an example of what I have:

Looks fine on desktop in Chrome and Firefox. On mobile Chrome, the input field has some extra height/padding which makes it not line up with the submit button. Nothing I change seems fix it.

On Chrome desktop it looks as though the button is 1 or 2 px greater in height than the input field. (I realise this doesn’t answer your problem!)

get rid of the borders, set an exact height for both inputs, set them to display:block and set the cell to vertical-align:top.


body { overflow-x: hidden; background: #323a45; }

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

input[type=submit] {
    border: 0;

.newsletter-form {
	/*width: 75%;*/
    padding-top: 10px;
    font-size: 30px;
	display: table;
	border: 0;
    margin: auto;

.newsletter-form div {
	display: table-cell;
	width: 100%;
input[type=text] {
	width: 100%;
	border-radius: 4px 0 0 4px;
	background: #fff;
	color: #444;
	font-size: 16px;
    box-shadow: none;
    padding: 13px 20px 15px 20px;
  border: 0;

input[type="submit"] {
    padding: 15px 20px;
	white-space: nowrap;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    height: 45px;
    line-height: normal;
    border-radius: 0 4px 4px 0;
    background: #7D8289;
    text-transform: uppercase;;
    font-size: 13px;
    cursor: pointer;
    color: #fff;

Hopefully that will fix any discrepancies but id there is still a difference you may have to adjust the vertical padding ad control line-height.

(Flexbox actually makes this sort of thing easier.)

1 Like

That’s odd. I’m totally not seeing that on my end on desktop.

Thanks, Paul. That worked. Makes sense now that I see what has to happen to make it work. Regarding flexbox, do you have an example of an input and submit buttong being set up this way with flexbox?

There are some examples using buttons in my flexbox patterns demo.

It’s the same approach using a submit and input.


Thanks Paul. That makes sense!

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