[Resolved] Chekout page columns ratio

Home Forums Support Chekout page columns ratio

  • This topic has 6 replies, 3 voices, and was last updated 5 months ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1468084
    tertas

    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

    #1468165
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1468530
    tertas

    Dear Elvin,

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

    #1468569
    tertas

    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,

    #1468831
    David
    Staff
    Customer Support

    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

    #1468936
    tertas

    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.

    #1468964
    David
    Staff
    Customer Support

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.