[Resolved] Mobile checkout experience

[Hannah]

Hello,

my mobile checkout looks like this:
https://prnt.sc
http://prnt.sc/rfczaz

Is there a way to put the order summery and the order button under the address fields so it is visible on the whole screen?

Thank you so much.
Best
Hannah

[David]

Hi there,

looks like the content was added using Elementor – so it doesn’t behave like the GP Theme would handle it – try this CSS to fix that:

@media (max-width: 768px) {
    .woocommerce-checkout .col2-set,
    #customer_details+#wc_checkout_add_ons,
    #order_review, #order_review_heading {
        width: 100% !important;
        float: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hannah]

Wow! It worked and looks amazing. Thank you so so much!!! 🙂

[David]

Awesome – glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts