Newsletter subscribe input and submit mobile issues

[deronsizemore]

Here’s an example of what I have: http://codepen.io/anon/pen/RpzaEg

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.

[Gandalf]

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!)

[PaulOB]

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.

e.g.

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%;
  vertical-align:top;
}
input[type=text] {
	width: 100%;
	border-radius: 4px 0 0 4px;
	background: #fff;
	color: #444;
	font-size: 16px;
    border:none;
    box-shadow: none;
    padding: 13px 20px 15px 20px;
  border: 0;
  height:45px;
  display:block;
}

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;
  border:none;
  display:block;
}

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.)

[deronsizemore]

@Gandalf

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!)

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

@PaulOB

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.

e.g.

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.

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?

[PaulOB]

@deronsizemore

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.

[deronsizemore]

@PaulOB

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

Thanks Paul. That makes sense!