Support

Home Forums Event Espresso Premium (EE4) Single page checkout email field size vs other text fields

(EE4) Single page checkout email field size vs other text fields

Posted: October 23, 2015 at 6:58 am


Ian Just

October 23, 2015 at 6:58 am

It may be the theme in use on the site (Simple Theme, from wordpress.org’s theme repository) but email fields appear distinctly smaller than other fields – slightly narrower and distinctly shorter.

I think these are the only fields that do live checking of the contents (to see if it looks like a possibly valid email address) and has a type of ee-reg-qstn-email but that string doesn’t appear in the EE source code.

Where do I need to look to get them looking the same as the other fields?

EE 4.8.17.p, WP 4.3.1


Tony

  • Support Staff

October 23, 2015 at 7:08 am

Hi Ian,

It is caused by your theme, but rather than the usual issue of themes overruling EE styles, the theme doesn’t actually have any styles for email inputs.

The theme applies styles to inputs based on type, for example:

input[type=text] {
    border: 1px solid #eeeeee;
    outline: none;
    width: 60%;
    font-size: 18px;
    font-size: 1.125rem;
    font-family: Helvetica;
    font-weight: 100;
    padding: 13px 15px 13px 15px;
}

That’s what gives all the text fields their current look.

The email input is type=”email” so none of those styles apply.

The fix is to just copy the text input styles and apply them to email inputs, like this:

input[type=email] {
    border: 1px solid #eeeeee;
    outline: none;
    width: 60%;
    font-size: 18px;
    font-size: 1.125rem;
    font-family: Helvetica;
    font-weight: 100;
    padding: 13px 15px 13px 15px;
}

If using a child theme, add that to your child themes stles.css file or we recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles such as these.

I tested this within Chrome Dev Tools and the email input then looks just like your others – http://take.ms/0LndO


Ian Just

October 23, 2015 at 9:05 am

Great! Thank you!

The support post ‘(EE4) Single page checkout email field size vs other text fields’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso