Searchfield is too small – CSS issue

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Searchfield is too small – CSS issue

This topic contains 12 replies, has 2 voices, and was last updated by

 
Keymaster
5 years, 10 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #8092

    Participant

    Hello.

    Thank you for your plugin, it’s just what we need.

    However, we have an problem with the width of the search function, which we have just short-coded into our header. We are using Avada theme, and we have used other search plugins this way, without any problems.

    Please have a look at the page, and you will see what is going on. The search field is too small to use, and if I set the width to e.g. min 400 px, it looks awfull in chrome and on phones.

    Looking forward to hearing from you.

    Regards,
    Henrik

    #8093

    Hi,

    You are welcome!

    From what I can see the search box is embedded within the wrong element. It’s inside the

    <div class="fusion-logo">...

    which is set to a maximum width of 150 pixels on mobile screens, which is causing the “shift” and the small input.

    I believe you should rather try placing exactly after that element and try the following additional custom css to give it the correct behavior:

    #ajaxsearchpro1_1 {
       display: inline-block !important;
       max-width: 400px !important;
    }

    This will make sure that the search container nicely “jumps” next to the logo on bigger screens, but not exceed a certain width ( in this case 400 pixels) . At the same time the line breaks on the mobile screens and the search gets displayed below the logo nicely.

    I didn’t try this yet, but I hope it will help.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #8094

    Participant

    Hi there

    Thank you very much.

    It didnt help me though, just made the searchbar slightly higher.

    Attachments:
    You must be logged in to view attached files.
    #8096

    Hi,

    The search bar is still within the fusion-logo element.

    I believe you should rather try placing exactly after that element..

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #8097

    Participant

    Should I contact the theme devs for this? I dont know how to place the element after the logo element – I just put the shortcode into the banner blog, and should work.

    #8098

    You can contact him, but you might wait for a long time for an answer.

    I think we can solve it quicker. How about trying this custom CSS:

    
    .asp_main_container {
        min-width: 300px;
        width: 100% !important;
        float: right;
        margin-left: 20px !important;
        max-width: 360px;
    }
    
    @media only screen and (max-width: 360px)  {
      .asp_main_container {
          margin-left: 50% !important;
      }
    }
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #8099

    Participant

    Thank you very much for your help!

    Now it looks nice. But it dissapears when using the mobile view.

    #8100

    Great!

    It’s because the theme element in which is it placed now is not displayed on mobile devices. Try fixing it with:

    .fusion-header-tagline {
        min-width: 300px !important;
        display: block !important;
    }
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #8101

    Participant

    It works like a charm!

    Thank you very much! – I will rate 5 on Codecanyon 😀

    Have a nice day!

    Regards, Henrik

    #8102

    Participant

    Woha, Just checked in chrome. Looks awful in there..

    #8108

    Hi!

    I’m not sure, I just checked on chrome and it looks fine to me: https://i.imgur.com/LDIuzAG.png

    Additionally, I have noticed something else with the theme. The logo container where the search is placed is resized to 50% on mobile devices. I’ve suggested the max-width for the plugin to prevent this issue, but actually it’s a better idea to change the logo width to 100% instead.

    I’ve added this custom CSS to the theme options:

    @media only screen and (max-width: 800px) {
      .fusion-mobile-menu-design-modern.fusion-header-v4 .fusion-logo {
        width: 100% !important;
     }
    }
    

    .. and removed the max-width from the search CSS as it’s no longer needed. This gave the search element more responsiveness, as the container is resizing with the screen properly.

    Desktop view: https://i.imgur.com/a69GvZk.png
    Mobile view Galaxy S5: https://i.imgur.com/gG8QXId.png
    Mobile view iPhone 6plus: https://i.imgur.com/N6RR0rx.png
    Mobile view iPad: https://i.imgur.com/eSsuHjh.png

    Before checking make sure to clear your browser cache, as the custom CSS files in the theme might be cached deeply.

    In case of other issues related to the theme you might have to contact them as well, but as far as I tested the theme elements were behaving correctly on all devices now.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #8109

    Participant

    Hello there

    I must say, Im really impressed with the quality of your support 🙂 It seems to work perfect now.

    Thank you very much! Have a nice day.

    Regards, Henrik

    #8110

    You are very welcome Henrik, I’m glad I could help you. Feel free to contact me if you have any other issues.

    If you like the plugin, feel free to rate it on your codecanyon downloads page, it’s greatly appreciated.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


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

You must be logged in to reply to this topic.