Prices and Dates UI Broken on Desktop Safari

Homepage Forums WP Travel Prices and Dates UI Broken on Desktop Safari

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #22065
    Sakuna
    Participant

    @support:

    Theme: Travel Base Pro
    Plugin: WP Travel
    Plugin: WP Utilities
    Plugin: WP PayPal

    The Prices and Dates layout is wrapped under on desktop Safari. They layout looks great on Chrome and Firefox.

    By Prices and Dates I refer to specifically to class="trip_list_by_fixed_departure_dates_booking". The booking button wraps under the rest of the form.

    Please images:
    Safari on Desktop
    https://drive.google.com/file/d/1g0dRu_xe_egks4Yd5cWxy6VreX1xEReq/view?usp=sharing

    Chrome
    https://drive.google.com/file/d/1uGMmYjUl7Zj9k1zNc0yrpNtVh__1kKxr/view?usp=sharing

    How can we address this?

    #22070
    Support Team
    Keymaster

    Hello,

    The issue regarding the padding, we have fixed the issue in the latest update of the plugin. If the issue still persist then kindly let us know.

    Thank you.

    #22074
    Sakuna
    Participant

    Hey @support:

    Thank you for the follow up.

    I double-checked after receiving the follow up from you above. With the latest version of the plugin installed, the issue persists on Safari Desktop.

    The images I link to above offer a visual of the issue.

    #22083
    wensolutions
    Keymaster

    Hello,

    Please add following given CSS code to resolve the issue related to safari desktop.

    .wp-travel-add-to-cart-form{
      flex-wrap:unset;
    }

    screenshot: https://d.pr/i/5Qj4fO

    Hope this helps.

    If you have any queries further, let us know.

    Thank you.

    #22223
    Sakuna
    Participant

    Hey @support:

    Thanks for the follow up.

    I incorporated the above CSS, and it fixed the issue on Safari browser for desktop, but broke the layout on mobile devices so I have removed the snippet.

    Any additional ideas?

    #22236
    wensolutions
    Keymaster

    Hello @infosanooktiew-com,

    When we inspected your site URL, we found that you have not added the CSS that we have provided.

    So please once add the CSS and verify the issue. Also, can you please mention the size of the screen so that we can check it as we were not able to find the issue in desktop view upon checking on our side.?

    Thank you.

    #22238
    Sakuna
    Participant

    Hey @support:

    Indeed, after having the CSS on the website for 5 days, I discovered it broke the mobile layout on iPhones, so I removed the CSS last night.

    I have tested on Safari desktop with view set to Actual Size on the following devices:
    Macbook Pro 15″
    Macbook Pro 13″
    Macbook Air 11″

    On each device it, the book button is wrapped under the first column as indicated in the Drive link above.

    Thanks

    #22243
    wensolutions
    Keymaster

    Hello,

    Please add following given CSS code to resolve the issue:

    @media screen and (min-width: 1200px){
      .wp-travel-add-to-cart-form{
        flex-wrap:unset;
      }
    }

    Hope this helps.

    If you have any queries further, let us know.

    Thank you.

    #22269
    Sakuna
    Participant

    @support:

    Thanks for the follow up. I had overlooked exploring this solution. Issue resolved. Thanks 🙂

    #22270
    wensolutions
    Keymaster

    Hello,

    Glad that the issue has resolved.

    If you have any queries further, let us know.

    Thank you.

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