[Support request] Woocommerce checkout from 2 columns to 1 column on mobile

Home Forums Support [Support request] Woocommerce checkout from 2 columns to 1 column on mobile

Home Forums Support Woocommerce checkout from 2 columns to 1 column on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1577469
    Miia

    Hi!

    I’ve modified my checkout page with the css underneath to get the shipping address and billing address into two separate columns. It works well but now it shows two columns also on mobile. How can I get to show only one column on mobile devices?

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

    .woocommerce-checkout .col2-set .col-1 {
    float: left;
    width: 48%;
    }

    #customer_details+#wc_checkout_add_ons,
    #order_review,
    #order_review_heading,
    .woocommerce-checkout .col2-set {
    width: 100%;
    float: none;
    margin-right: 0;
    }

    #1577530
    David
    Staff
    Customer Support

    Hi there,

    you wrap your CSS in an @media query so it only applies to the desktop eg.

    @media(min-width: 769px) {
    
        /* Your CSS goes here */
    
    }
    #1577540
    Miia

    Thank you! This helped.

    #1578001
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.