[Resolved] Chekout page columns ratio

Hi,

Are you using the same site from the other topics? https://www.gaming.gen.tr/

If so, when we look closely the containers for the Invoice Details Form and the Your Order Sheet are controlled by the same classes col-12 col-md-5 col-lg-6.

It’s quite different with the site from the other topic.

Here’s how you control the ratio.

/*Adjust this for Invoice Details Form*/
form.checkout.woocommerce-checkout.row div.col-lg-6:first-child {
    width: 40%;
    max-width: 40%;
    flex: 0 0 auto;
}

/*Adjust this for Your Order Sheet*/
form.checkout.woocommerce-checkout.row div.col-lg-6:last-child {
    width: 40%;
    max-width: 40%;
    flex: 0 0 auto;
}

Currently, these 2 are set to 50%/50%. Tho it may not look that way because your .checkout-order-review and .woodmart-table-wrapper inside the Your Order Sheet is styled to have a significant amount of padding on both of them, making the whole column look smaller in size.

If you’re using the canoyuncak site which uses Prime, you can use the same col2-set for the left column but you’ll have to change values for .woocommerce-checkout-review-order and #order_review_heading as well.

Example:

/* For the left column */
.woocommerce-checkout .col2-set {
    width: 40%;
    float: left;
    margin-right: 5%;
}

/*For the right column*/
#order_review_heading {
    width: 55%;
    float: right;
    margin-right: 0;
}