Align boxes

  • Resolved rmniemela

    (@rmniemela)


    9 years, 9 months ago

    Am trying to find out how to align the name, email and subject boxes to appear on the same line. Can find info in your forum to align them on separate lines, but not what I need.

    I have some extra css code to make the boxes prettier, but even without that code, the boxes all appear on different lines. That’s how they appeared on first installed.

    Am using Vantage theme.

    https://ww.wp.xz.cn/plugins/pirate-forms/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter rmniemela

    (@rmniemela)

    9 years, 9 months ago

    Sorry, forgot link to website

    http://walksudbury.ca

    Uriahs Victor

    (@uriahs-victor)

    9 years, 9 months ago

    Hi there,

    I checked your website and the fields are on the same line: http://prntscr.com/cbxid9

    Do you still need help here?

    Best regards,
    Uriahs

    patronni

    (@patronni)

    9 years, 9 months ago

    Hi, I´ve got the same problem here

    http://yrdi.cl/contacto/

    Please help, thanks in advance.

    Kind regards,

    Thread Starter rmniemela

    (@rmniemela)

    9 years, 9 months ago

    I found some code to put the fields on the same line, but I’d also like to have some extra space in between the fields. Am not sure if I’m using the proper coding because the last field does not line up with the message box right margin.

    .pirate_forms_three_inputs {
    display: inline-block;
    width: 33%;
    }

    Thread Starter rmniemela

    (@rmniemela)

    9 years, 9 months ago

    I came up with this solution. If there’s something more elegant, I’d be interested in knowing.

    .pirate_forms_three_inputs {
    display: inline-block;
    width: 30.666%;
    margin-right: 4%;
    }

    .contact_subject_wrap {
    margin-right: 0 !important;
    }

    Uriahs Victor

    (@uriahs-victor)

    9 years, 9 months ago

    Hi there,

    You should create a media query for mobile devices so the form fits better on mobile devices:

    @media screen and (max-width: 414px){
    .pirate_forms_three_inputs {
    display: block;
    width: 100% !important;
    margin-right: 0 !important;
    }
    }

    Best regards,
    Uriahs

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Align boxes’ is closed to new replies.