Okay
  Public Ticket #3024406
checkout mobile displayed
Closed

Comments

  •  16
    alis_andreea started the conversation
    April 14, 2022 at 10:01am

    Hello,

    This would be my last issue that I have encountered so far.

    I did a simulation both on the desktop and on mobile, I purchased  something and did the checkout process. 

    On the desktop it looks good, please see the attachment, but on the mobile version the information is piled up and decalate. Can this be fixed for mobile? I'm not interested in looking a certain way, but just looking ok and not so crowded.

    Thank you!

  •  1,877
    Judith replied
    April 14, 2022 at 5:32pm

    Hi There,

    Please try this css:

    @media only screen and (max-width: 1000px){
.woocommerce ul.order_details li {
    line-height: 4;
    }
}

    Thanks.

  •  16
    alis_andreea replied
    April 15, 2022 at 9:53am

    Hi Judith,

    Thank you, It looks much better with the css you have sent me.

    Please see atachement and tell me if is there any way to make it look on mobile like picture 3.

    I have uploade :Picture 1-the way it used to look, picture 2- how it looks now, and picture 3- how I would prefer.

  •  279
    Noah replied
    April 15, 2022 at 1:24pm

    Hi there,

    Could this work as an alternative to picture 3:

    @media only screen and (max-width: 1000px){
.woocommerce ul.order_details li {
    float:none;
}
.woocommerce ul.order_details li strong{
    margin-bottom:5%
}
}

    add the CSS to salient \ general settings - css script related - custom css.

    The order details are arranged one on top of the other with a bit of space between each.
    This is the order we made - https://aliswonders.ro/checkout/order-received/6448/?key=wc_order_XvIFpZsOs0Nzn maybe delete it.


    Thanks.

  •  16
    alis_andreea replied
    April 16, 2022 at 6:02am

    Hi Eliud,

    Thank you, I like it, it looks nice:)