WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
Text input boxes not lining up in the widget (4 posts)

  1. jamieedwards
    Member
    Posted 2 years ago #

    Hello Nate,
    I have added this code to my style.css file and it does nothing. I am wanting all the text boxes to line up, and because the word "Email" is shorter than "First Name" the text box doesnt line up. Can you show me how to do this? Thanks very much. Here is a link to my site http://eyesandwings.jamieedwards.com/?p=851

    I currently have this code in my style.css file, but it doesnt seem to make each label appear above the text input box. I would prefer if I could get each box to line up, but not have the label above the box if possible! :)

    #mc_signup_form .mc_input {
    display: block;
    }

    http://wordpress.org/extend/plugins/mailchimp/

  2. dottianne7
    Member
    Posted 2 years ago #

    did you ever get the answer/fix? I would like to have the same fix to get the entry fields to align

  3. jamieedwards
    Member
    Posted 2 years ago #

    No, I haven't had an answer yet. I hope soon...

  4. mc_nate
    Member
    Posted 2 years ago #

    Hey there!

    Because the inputs are designed to butt right up against the field labels, you'll have to get somewhat creative with the CSS to get this to look just right. The "display:block" property is designed to knock the input field down below the field label, which isn't quite what you're looking to do.

    Instead, you'll want to create a little spacing between the field label and the input box, and then get granular with how much margin to add. So, just getting general, here, you could add something like this to your site's CSS:

    #mc_signup_form .mc_input {
    margin-left: 10px;
    }

    That will give you a 10px margin to the left of the input area. Then, you could add this little bit to get the "Email" field to match up:

    #mc_mv_EMAIL.mc_input {
    margin-left: 35px;
    }

    That would give you something that looks like this in Chrome: http://cl.ly/370h140V2v3c1k1U290h

    While we can't get too nitty-gritty, that should at least get you going on the right path!

    Cheers

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.