Wider result box than input

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Wider result box than input

This topic contains 1 reply, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18489
    Effect
    Effect
    Participant

    Hello,

    I have a WordPress site with a Ajax Search Pro input field at about ~100px-200px width next to the menu.

    However I would like the result box to be larger than this. It’s a webstore with preview images of the products. If possible I would want the results to have some sort of 100% / vw and position:absolute – something like that.

    Is it possible to make the result box not dependant on the width I fill for the input? Either by making the input smaller or the result page larger.
    Anything that could make the result larger than the small input I’m using for the actual search is desirable.

    This maybe qualifies as customization, but any help would do alot – even if it’s just where to look or to what classes to put some custom CSS.
    I am proficient with that.

    See image:

    This shows the menu, a demo of the input field – and how the search box limits itself to the width of that.
    The results could be 100% of the page width to display the products of the page. This looks a bit small.

    Hope there is something we can do!
    Thanks in advance,

    Cheers,
    Erik

    Attachments:
    You must be logged in to view attached files.
    #18507
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Erik,

    It could be possible actually, with some custom CSS adjustments. I would personally suggest something like this:

    .asp_r_1.isotopic {
        width: 50vw !important;
        left: 45% !important;
    }
    
    @media only screen and (max-width: 720px) {
        .asp_r_1.isotopic {
            width: 70vw !important;
            left: 25% !important;
        }
    }
    
    @media only screen and (max-width: 480px) {
        .asp_r_1.isotopic {
            width: 95vw !important;
            left: 0 !important;
        }
    }

    In this scenario:
    – On desktop resolutions the results width is 50% of the screen width
    – On device width below 720 pixels 70%
    – below 480 pixels 95%
    You can adjust the values of course, this is just an example 🙂

    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.