Broken design on mobile phones

Ivory Search › Forums › Support › Broken design on mobile phones

Viewing 4 reply threads

You must be logged in to create new topic or reply to the topic.

  • Author
    Posts
    • March 23, 2025 at 2:02 AM #23866
      Charlie
      Participant
      • Topics: 1
      • Replies: 5

      Hello good day hoping you are well, I would like to tell you the following situation: I have been trying to make the form dropdown responsive on mobile devices however I have not been able to do it since it is not responsive by default because when I press the search icon on mobile the search field along with its icon goes off the screen. I have already tried to change the shape of the dropdown list to full width only for mobile devices and I have not been lucky enough to do so, I have also been manipulating the left and right using css but when I reach a width of 318 pixels it no longer lets me center the search field. Could you take a look at it?

      Thanks in advance

      Attachments:
      You must be logged in to view attached files.
    • March 24, 2025 at 5:03 PM #23884
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,784

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

      Could you please share your site URL where it displays so I can help you to achieve it?

      Best regards,
      Ivory Search Support

    • March 25, 2025 at 12:40 PM #23888
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,784

      You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

      @media (max-width: 443px) {
    body .is-menu form.is-search-form {
        right: 0;
        left: 0;
        position: fixed;
        z-index: 999999;
        top: 62px;
        max-width: 100%;
    }
}
      • March 25, 2025 at 9:39 PM #23893
        Charlie
        Participant
        • Topics: 1
        • Replies: 5

        Hi, thanks for your quick response. It did work, however, the expandable search box layout breaks on layouts 310 pixels and below, and I’d like it to cover at least one layout 260 pixels and above, since my entire page is responsive up to that width. Is there any way to achieve this?
        Thanks in advance

    • March 26, 2025 at 5:51 PM #23905
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,784

      Please also try using the CSS code below.

      @media (max-width: 443px) {
body .is-form-style.is-form-style-3 label{
    width: calc(100% - 85px)!important;
}
}
      • March 27, 2025 at 1:48 AM #23911
        Charlie
        Participant
        • Topics: 1
        • Replies: 5

        Thanks for your help. It´s works so good.
        Have a nice day

    • March 27, 2025 at 3:51 AM #23915
      Charlie
      Participant
      • Topics: 1
      • Replies: 5

      Good morning, excuse me, I just noticed that the search bar stays fixed when you scroll down the screen, which has an unpleasant effect. Is there a way to block the screen from scrolling when you click on the search icon to display the search bar? This only happens on a max width of 443px.
      Thanks in advance

      • March 27, 2025 at 1:01 PM #23917
        Ivory Search
        Keymaster
        • Topics: 0
        • Replies: 1,784

        No, we can’t do anything in this case as it is a limitation of your theme.

      • March 29, 2025 at 3:22 AM #23937
        Charlie
        Participant
        • Topics: 1
        • Replies: 5

        Hello, good day, thanks for the help. Is there any other way to hide this behavior of the search menu staying open and visible when scrolling down still maintaining the other features you’ve provided to make it responsive? For example, to close the search bar when scrolling down or changing the fixed position to avoid the fortuneless behavior, while maintaining its responsive functionality.

  • Author
    Posts
Viewing 4 reply threads

You must be logged in to create new topic or reply to the topic.