[Resolved] Chekout page columns ratio

[roadlink]

Hello,
Is there anyway to change column %?
https://prnt.sc/uriul7

ı have read some topics but ratio’s are changing only address part.
https://generatepress.com/forums/topic/woocommerce-checkout-layout/page/2/#post-1191089

[Elvin]

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;
}

[roadlink]

Dear Elvin,

Could you please check private information.
It didn’t work for the right side btw; https://prnt.sc/urp7zz

[roadlink]

It worked in this way, I mean I did arrange the ratios of both column in checkout page.

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

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

But it didn’t solve my problem exactly. I was trying get rid of double lines for these wording.
https://prnt.sc/urpq14
I guess i need to change TH size in that table,

[David]

Hi there,

similar issue here with a solution for reducing the width of the Column Labels:

https://generatepress.com/forums/topic/how-can-i-fix-this-spacing-on-checkout-page/#post-1388039

[roadlink]

Hi David,
Indeed it is solved the issue.
It is weird that that much code needed for doing this. Thank you.

Similar issue happens for orders page. But it is for another day.

[David]

Tables are responsive nightmare unless the HTML supports it then there is little that can be done with resizing them. That method actually breaks those rules somehow lol

Glad to be of help.

[Author]

Posts