दो कॉलम चेकआउट Woocommerce - सीएसएस, वर्डप्रेस, WooCommerce, चेकआउट

मुझे www.narwal.shop/checkout पर दो कॉलम चेकआउट होना पसंद है

मैंने निम्नलिखित कोड लागू किया:

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 993px) {

/* ---------------------
WOOCOMMERCE
--------------------- */
body .woocommerce .col2-set .col-1{width:100%;}
.woocommerce-billing-fields h3{margin-top:40px;}
.woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:left;}
#order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review{float:left;width:48%;margin-left:2%;}

}

वे एक-दूसरे के बगल में पूरी तरह से गठबंधन होते हैं (शीर्षक "आपका ऑर्डर" छोड़कर, मैं केवल उन्हें एक दूसरे के बगल में चाहता हूं। सहायता की सराहना की जाती है।

उत्तर:

आपका सीएसएस 100% होने के लिए .col-1 सेटिंग कर रहा है। इसे 48% बनाने का प्रयास करें:

body .woocommerce .col2-set .col-1 { width: 48%; }

और इसे .col-2 में भी 48% और सही फ़्लोट करने के लिए जोड़ें:

body .woocommerce .col2-set .col-2 { width: 48%; float: right;}

इसके अलावा इस पूरी लाइन को हटा दें क्योंकि इसमें युक्त div 48% चौड़ा भी होगा:

.woocommerce .col2-set, .woocommerce-page .col2-set{width:48%;float:right;}

वैकल्पिक रूप से, यदि आपकी थीम में कॉलम शॉर्टकोड हैं, तो यह आसान होगा। यहां बताया गया है कि मैंने यू-डिज़ाइन शॉर्टकोड और कोई सीएसएस के साथ एक ही चीज़ कैसे हासिल की।

[one_half]
[woocommerce_cart]
[/one_half]

[one_half_last]
[woocommerce_checkout]
[/one_half_last]