Mobile checkout page layout broken

Home › Forums › Jevelin Theme › Mobile checkout page layout broken

Home › Forums › Jevelin Theme › Mobile checkout page layout broken

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    NOT RESOLVED Posts

  • Jn
    Participant

    Hi,

     

    I bought your theme Jevelin and started to put together a webpage, but I ran into the problems with breaking layout in a woocommerce checkout when working on a mobile device – see attached screenshots.

    Is there a way to get it fixed? Thanks.

    Best Regards,

    jn

    • This topic was modified 3 years, 11 months ago by Jn.
    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    H Jn,

     

    I hope you are well today and thank you for your question.

     

    Could you please share the page URL from your site where it is displaying broken and tell me exactly what issues you are referring to in your shared screenshots so that I can troubleshoot it?

     

    Best regards,
    Shufflehound team

    Jn
    Participant

    Hi,
    attached are url with access info + I highlighted in screenshot the problematic parts.

    One needs to go through the full checkout process ->
    – pick an item from shop (doesn’t really matter) and add it to cart
    – should be automatically redirected to cart
    – continue with button “SKONTROLOVAŤ A OBJEDNAŤ”
    – fill in the form (could be fabricated data but needs to went through validation)
    – continue with button “Objednať s povinnosťou platby”
    – see the page with bank transfer info – layout broken on mobile

    Tested on multiple phones and browsers – iOS Firefox, iOS Chrome, Android chrome, also in desktop browser Chrome with resized screen to small.

    Regard,
    Jn

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    You can resolve the button issue displayed in your third Košík-Kolégium-Antona-Neuwirtha-1.pdf file by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (max-width: 800px){
#page-container .woocommerce .shop_table .button[name=update_cart] {
    width: auto !important;
    float: none;
    margin: 0 auto;
}
}

     

    Regarding other two issues, could you please tell me how you want to display that text on mobile?

    Jn
    Participant

    It would be nice to have all the input fields aligned (both horizontally and vertically), and eventually on separated lines/rows – make sense with the smallest display’s resolutions.

    Similar goes with the table containing the bankwire info – ideally it would nicely collapse to the individual rows.

    Regards,

    Jn

    Shufflehound Support
    Moderator

    Please use the below custom CSS code to achieve it.

     

    @media (max-width: 600px){
#page-container .woocommerce-billing-fields__field-wrapper .form-row {
    clear: both;
    display: block;
    width: 100%;
}
}

@media (max-width: 800px){
#page-container .woocommerce ul.order_details li {
    clear: both;
    width: 100% !important;
}
}

.woocommerce #page-container  #payment #place_order, 
.woocommerce-page #page-container #payment #place_order {
    margin-top: 30px;
}
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)