Hello
I want to do the 2 column checkout just like in this screen
Is it possible in CSS? Site is https://www.stanleyjr.pl/strona-glowna/
Thanks for help
Mike
anyone?
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
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
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
Works fine! thanks
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