Subscribe box out of alignment

  • Hi,

    I have set up a subscribe box in my footer but the boxes are out of alignment. The three boxes (name, email and submit button) should be side-by-side.

    This form links to MailChimp so I am confused about how to fix this.

    Any ideas would be appreciated.

    Also, how can I make the line of text ’10 ideas, every 10 days’ appear on the row below ‘Get The Idealist’ and in a smaller font, please?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    .mc4wp-form-theme input[type=text], .mc4wp-form-theme input[type=email], .mc4wp-form-theme input[type=tel], .mc4wp-form-theme input[type=url], .mc4wp-form-theme input[type=date], .mc4wp-form-theme input[type=number], .mc4wp-form-theme select, .mc4wp-form-theme textarea {
   float: left;
}

    You’ll have to, at the very least, put that 10 days…” text on a line by itself before anything can be changed.

    To add CSS: use the “Additional CSS” option in the customizer. https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

    Thread Starter marieteather

    (@marieteather)

    Hi,

    That doesn’t seem to correct it. The boxes are still out of alignment. Screenshot here:https://drive.google.com/open?id=1_fkCyj9iWohYJJenaIYc0y820pxHVpux

    I added this to the additional CSS as directed.

    Thanks

    Thread Starter marieteather

    (@marieteather)

    I realised I already have some custom code on my site which refers to the sign up box in my sidebar. This links to the same MailChimp list. Could this be effected it?

    This is the code:

    .signup-container{
    width: 278px;
    background-color: black;
    text-align: center;
    }
    .signup-header{
    float: left;
    width: 262px;
    margin: 0 auto;
    }
    .signup-header-image{
    color:#ffffff;
    width: 100%;
    }
    img.IdeaList-signup-image{
    width: 100%;
    margin-top:15px;
    margin-bottom: -5px;
    display: inline-block;
    }

    #sign-up-now {
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    }
    .sign-up-button{
    width: 80%;
    background: transparent;
    }
    .signup-input-type > input[type=”text”],input[type=”email”] {
    display: inline-block;
    height: 45px;
    font-size: 16px;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    padding: 0 15px;
    font-family:georgia;
    }
    .input-email-margin{
    margin-top: 10px;
    }

    img.IdeaList-signup-image {
    background-color: #333333;
    border-color: #333333;
    padding-top: 0;
    }

    img.sign-up-button {
    border-color: #333333;
    background-color: #333333;
    color: #333333;
    }

    input.input-text {
    background-color: #ffffff;
    margin-top: 10px;
    width: 240px;
    }

    #sign-up-now {
    padding-top: 1px;
    padding-bottom: 1px;
    }

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Subscribe box out of alignment’ is closed to new replies.