Fix the Layout for Shipping and Billing Address Forms in the Checkout Block (https://github.com/woocommerce/woocommerce-blocks/pull/11486)
* Fix empty spaces in the address form * Fix checkout layout for Japan and Hungary * Added some comments in CSS
This commit is contained in:
parent
d881fe208d
commit
2182457673
|
@ -18,11 +18,11 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 0 calc(#{$gap-smaller} * 2); // Required for spacing especially when using flex-grow
|
||||
|
||||
.wc-block-components-text-input,
|
||||
.wc-block-components-country-input,
|
||||
.wc-block-components-state-input {
|
||||
flex: 0 0 calc(50% - #{$gap-smaller});
|
||||
flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-of-type(2),
|
||||
|
@ -33,7 +33,8 @@
|
|||
|
||||
.wc-block-components-address-form__company,
|
||||
.wc-block-components-address-form__address_1,
|
||||
.wc-block-components-address-form__address_2 {
|
||||
.wc-block-components-address-form__address_2,
|
||||
.wc-block-components-country-input {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue