Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 28, 2021 at 10:24 am #1307712
    msulecki

    Hello
    I want to do the 2 column checkout just like in this screen

    image002

    Is it possible in CSS? Site is https://www.stanleyjr.pl/strona-glowna/

    Thanks for help

    Mike

    June 28, 2021 at 4:57 pm #1307792
    msulecki

    anyone?

    June 29, 2021 at 9:25 am #1307883
    Ismael

    Hi,

    Thank you for the inquiry.

    You can use this css code to adjust the width of the checkout form and the order details.

    @media only screen and (min-width: 768px) {
  .woocommerce-checkout {
    display: flex;
    justify-content: space-between;
  }

  .woocommerce-checkout #customer_details {
    overflow: visible;
    flex: 1 1 60%;
    margin-right: 4%;
  }

  .woocommerce-checkout #order_review_heading {
    position: absolute;
    left: 64%;
  }

  .woocommerce-checkout #order_review {
    flex: 1 3 34%;
    top: 54px;
    position: inherit;
  }
}

    Best regards,
    Ismael

    June 29, 2021 at 10:42 am #1307898
    msulecki

    Thanks that helped on PC, but on mobile looks bad. Is it possible that on mobiles it will be still in one collumn? Thanks

    regards

    June 30, 2021 at 6:39 am #1308034
    Ismael

    Hi!

    Yes, that is possible. We wrapped the code inside a css media query so that it will only affect the desktop view. Please try it again.

    Cheers!
    Ismael

    June 30, 2021 at 4:06 pm #1308164
    msulecki

    Works fine! thanks

    June 30, 2021 at 4:10 pm #1308165
    msulecki

    but
    there is stil problem on PC

    image

    July 2, 2021 at 4:03 am #1308437
    Rikard

    Hi,

    Thanks for the screenshot. Please try this CSS instead:

    @media only screen and (min-width: 768px) {
.woocommerce-checkout #order_review {
    flex: 1 3 34%;
    top: 54px;
    position: inherit;
    margin-top: 57px;
}
.woocommerce-checkout #order_review_heading {
    position: absolute;
    left: 65%;
}
}

    Best regards,
    Rikard

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