Change search form width based on specific screen width

Ivory Search › Forums › Support › Change search form width based on specific screen width

Tagged: , ,

Viewing 5 reply threads

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

  • Author
    Posts
    • October 18, 2020 at 1:50 AM #6042
      dearepoch
      Participant
      • Topics: 1
      • Replies: 2

      Hello,

      Thank you for the wonderful plugin! I’m not a coder and just recently tried making a website, so apologies if this question is basic.

      I want to make the search bar have different width when the screen width differ, specifically:
      1) >1360px screen width: max-width 100%, width 520px (this is already implemented in the custom CSS field)
      2) <1360px screen width: max-width 100%

      I’m not sure how to achieve 2)… Could you help?

      This is my current CSS in the custom CSS field:

      .is-menu.default form {
    max-width: 100%;
    width: 520px;
}

      Thank you!

    • October 19, 2020 at 12:46 PM #6052
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      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 so that I can help you?

      Best regards,
      Ivory Search Support

    • October 19, 2020 at 5:48 PM #6060
      dearepoch
      Participant
      • Topics: 1
      • Replies: 2

      Hello,

      Here’s the site: http://indoparta.com/

      It’s currently on the homepage’s header. I just recently changed the width to 480px.

      Since the current CSS only allows a fixed width for the search form, it causes my header to be jumbled up when the screen width is lower than a certain px amount (please look at the screenshot attached). I want to avoid this, but still keeping the length of the search form at 480px when it’s in desktop view.

      Could you please help?

      Attachments:
      You must be logged in to view attached files.
    • October 20, 2020 at 8:47 PM #6077
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

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

      @media only screen and (max-width: 1160px) {
.is-menu.default form {
    max-width: 100%;
    width: auto;
}
}
    • October 20, 2020 at 10:13 PM #6086
      dearepoch
      Participant
      • Topics: 1
      • Replies: 2

      Hi,

      Thank you, works like a charm! Best support ever šŸ˜€

      Cheers!

    • October 21, 2020 at 7:06 PM #6095
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      You are always welcome, Iā€™m glad I was able to help you with this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:

      https://wordpress.org/support/plugin/add-search-to-menu/reviews/?filter=5

      Iā€™d really appreciate that. šŸ™‚

      And if I can be of any further assistance please don’t hesitate to ask.

  • Author
    Posts
Viewing 5 reply threads

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