Safari UI Itinerary Bug | Chrome OK: Facts Section Wider than Viewport Width

Homepage Forums WP Travel Safari UI Itinerary Bug | Chrome OK: Facts Section Wider than Viewport Width

This topic contains 5 replies, has 2 voices, and was last updated by  Support Team 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #19483

    MountainTraveler
    Participant

    Hey @support:

    Sorry, I am not certain whether this topic relates to WP Travel or the WP Utilities addon.

    The Facts section on Itinerary pages that displays icons and a couple of words of description and has a grey-ish background is wider than viewport width on Safari desktop. On mobile Safari tests indicate it is ok, and on Chrome desktop there is no issue. I cannot test Android since I don’t have that device.

    I think this is a CSS issue, but not sure.

    Does this make sense?

    Thoughts?

    #19489

    Support Team
    Keymaster

    Hello

    Can you please provide us with the screenshot of the reported issue as we are having trouble replicating the issue in our side ?

    Regards!

    #19494

    MountainTraveler
    Participant

    Hey @support:

    Thanks for the follow up. The issue is a little difficult to describe.

    Here is a Google Drive link with a couple of screenshots.

    Thanks!

    The link is not showing when I publish the reply, but is still here when I edit the comment, so I am hoping you see it on your end.

    #19507

    Support Team
    Keymaster

    Hello

    Unfortunately, we have not received any links that you have attached in the forum above.

    Kindly send us the attachment link in the given mail address : support[@]wptravel.io

    Regards!

    #19852

    MountainTraveler
    Participant

    Hey @support:

    Thanks for following up via email and providing a solution. For other users who experience this issue, here is the fix:

     .single.single-itineraries #content {
        overflow-x: hidden;
    }

    Then add the following to ensure the facts UI displays correctly on desktop and mobile:

    @media screen and (min-width: 1024px) {
    
    .tour-info .tour-info-column .tour-info-item{
    width: 33.3%;
    }
    
    }

    Thanks again!

    #19856

    Support Team
    Keymaster

    Hello,

    Thank you for mentioning the solutions and hope it will be helpful to the user looking for these solutions.

    Best Regards!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.