Field Title Alignment

  • CucumberandCompany

    (@cucumberandcompany)


    7 years ago

    I’ve used the CSS below to make Contact Form 7 have fields side by side, but have ran into the problem of the field titles (specifically phone and your message) not being aligned properly.

    Ideally “phone” would not hang over the left edge of its box and “your message” would be on the far left in line with “email” and “your name”.

    Does anyone know how I can fix this?

    #two-column{
    width: 100%;
    }
    #two-column p{
    margin-bottom: 30px;
    color: #cccccc;
    text-align: left;
    }
    #two-column input[type=”text”]{
    border: none;
    border: 1px solid #CCCCCC;
    font-size: 14px;
    padding: 15px 20px;
    }
    #two-column input[type=”email”]{
    border: none;
    border: 1px solid #CCCCCC;
    font-size: 14px;
    padding: 15px 20px;
    }
    #two-column input[type=”submit”]{
    padding: 15px 20px;
    background:#222;
    color:#CCCCCC;
    border: 1px solid #CCCCCC;
    float:right;
    font-size: 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    #two-column textarea {
    position: relative;
    width: 100%;
    }
    #two-column input[type=”submit”]:hover{
    background:#CCCCCC;
    color:#CCCCCC;
    border: 1px solid #CCCCCC;
    }

    #two-column #left{
    width: 50%;
    float: left;
    }
    #two-column #left input[type=”text”]{
    width:95%;
    }

    #two-column #right{
    width: 50%;
    float: right;
    }
    #two-column #right input[type=”text”]{
    width: 95%;
    float: right;
    }

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

Viewing 1 replies (of 1 total)
  • plavalle

    (@plavalle)

    The issue here is not the plugin.

    double check the code you have used to build the section.

    You have the two-column div, then a paragraph, then two divs (left/right) that are floated, followed by two more paragraphs.

    Set the paragraphs width to 100%, this will fix the your message section.

    Remove the width of 95% on #two-column #right input[type=”text”].

    For the paragraph holding the phone input add padding: 0 0 0 5%;
    For the paragraph holding the email input add padding: 0 5% 0 0;

Viewing 1 replies (of 1 total)
  • The topic ‘Field Title Alignment’ is closed to new replies.