Placing 2 checkout fields next to each other

  • Resolved jokubas2000k

    (@jokubas2000k)


    3 years, 9 months ago

    Hi,

    I need some help changing the layout of the checkout billing form fields with CSS.

    I’m trying to place 2 wide fields next to each other in 1 line.

    I tried:

    p#billing_address_1_field {
    float: left;
    width: 66%;
    margin-right: 4%;

p#billing_postcode_field {
    float: right;
    width: 30%;

    But it didn’t work. The fields do not jump into 1 line. Why?

    Screenshot

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Hi there ??

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
    ?

    /* Merge address & postcode fields into 1 row */
p#billing_address_1_field {
    display: inline-block !important;
    float: initial !important;
    width: 66% !important;
    margin-right: 4% !important;
}

p#billing_postcode_field {
    float: right !important;
    width: 30% !important;
 }

    ?
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    I hope that helps! ??

    Plugin Support abwaita a11n

    (@abwaita)

    Hi @jokubas2000k,

    We’ve not heard back from you in a while, so I’m marking this thread as resolved. Hopefully, the above snippet was helpful and you were able to find a solution to your problem!

    If you have further questions, please feel free to open a new topic.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Placing 2 checkout fields next to each other’ is closed to new replies.

Tags