Title: Styling issue
Last modified: February 4, 2022

---

# Styling issue

 *  Resolved [xcsmall](https://wordpress.org/support/users/xcsmall/)
 * (@xcsmall)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/styling-issue-23/)
 * Hello,
 * I would like to make the search bar narrower (at about 40% on desktop) and to
   change it as well for iPad and mobile users (at about 60% for iPad and 80% for
   mobile).
 * Could you help? I’ve tried a couple of CSS code without much success.
 * Many thanks and kind regards,
 * Géraldine
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstyling-issue-23%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/styling-issue-23/#post-15331460)
 * I hope you are well today and thank you for your question.
 * 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
 *     ```
       form.is-search-form {
           max-width: 40%;
       }
   
       @media only screen 
         and (min-device-width: 768px) 
         and (max-device-width: 1024px) 
         and (-webkit-min-device-pixel-ratio: 1) {
           form.is-search-form {
           max-width: 60%;
           }
       }
   
       @media only screen and (max-width: 768px) {
           form.is-search-form {
           max-width: 80%;
           }
       }
       ```
   
 * Best regards
 *  Thread Starter [xcsmall](https://wordpress.org/support/users/xcsmall/)
 * (@xcsmall)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/styling-issue-23/#post-15333538)
 * Fantastic, it works perfectly. Thank a lot for your great support!
 * One last question, I have a top menu in line (you can see in the page I shared)
   and I’ve tried to perfectly align a search icon at the far right of my menu without
   success.
 * It always looked not aligned at all and it created some sort of extra line below
   my menu 🙁 Is there a way to acheive this perfect alignment on 1 line based on
   what you see on my website?
 * Many thanks for your great help and kind regards,
 * Géraldine
 *  Plugin Author [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/styling-issue-23/#post-15334003)
 * > One last question, I have a top menu in line (you can see in the page I shared)
   > and I’ve tried to perfectly align a search icon at the far right of my menu
   > without success.
 * I don’t see any search icon on the menu of your shared website.
 * Please advise.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Styling issue’ is closed to new replies.

 * ![](https://ps.w.org/add-search-to-menu/assets/icon-256x256.png?rev=2077748)
 * [Ivory Search - WordPress Search Plugin](https://wordpress.org/plugins/add-search-to-menu/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/add-search-to-menu/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/add-search-to-menu/)
 * [Active Topics](https://wordpress.org/support/plugin/add-search-to-menu/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/add-search-to-menu/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/add-search-to-menu/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 3 replies
 * 2 participants
 * Last reply from: [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * Last activity: [4 years, 3 months ago](https://wordpress.org/support/topic/styling-issue-23/#post-15334003)
 * Status: resolved