Wider result box than input

[Effect]

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

[Ernest Marcinko]

Hi Erik,

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

[html].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;
}
}[/html]

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 🙂

[Author]

Posts