0

Want two input fields in one Line on checkout page. Looks like it is binded by knockoutjs. Didn't figure out where to add custom classes. Looked into so many files (Magento_Ui and Magento_Checkout) but didn't found anything to change the classes. Please help me out in making the following shipping address template.

enter image description here

12
  • 1) Magento way magento.stackexchange.com/a/195712/54588 2 ) Easiest way using bootstrap : magento.stackexchange.com/a/195553/54588 Nov 3, 2017 at 12:13
  • @Manoj where to add css class in checkout shipping form. Which File?
    – Vinay
    Nov 3, 2017 at 12:15
  • Any custom css you can add in "_extend.less" for any any page ..the best magento way..state in 1st way.... 2nd you can add bootstrap in your project and use bootstrap classes Nov 3, 2017 at 12:17
  • @Manoj but there is no div added in checkout page. I will write the css if there is specific div. How to add div in Checkout Shipping Address Form fields.
    – Vinay
    Nov 3, 2017 at 12:18
  • start debug mode from admin and find out the file , where you can add div or custom classes Nov 3, 2017 at 12:19

1 Answer 1

1

Enter the css code in custom.css to achieve design mention in question image (checkout shipping fields). It will make all fields to half except Street Address

.checkout-index-index .form-shipping-address #shipping-new-address-form {
            .field {
                &:nth-child(2n+1) {
                    width: 49%;
                    float: left;
                }
                &:nth-child(2n) {
                    width: 49%;
                    float: right;
                }
            }
            fieldset {
                width: 100% !important;
                div.field {
                    width: 100% !important;
                }
            }
        }   
2
  • Awesome, It works for me. Jan 21, 2020 at 10:19
  • may i know the path of this file plz Apr 7, 2020 at 7:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.