Customize Search Results Width

[hartliep]

I have a search bar on this website, and the search text box itself is sized exactly how I want it, but the search results are not. I searched for a way to customize the width of the results box, but was only able to find height (for vertical results). I was able to find the css that controls this via the inspect tool in Chrome, but when I took all of the css data (ID and classes) and tried to change it in the css editor, nothing happened, even after clearing the cache(s).

Am I missing something? I need the search results drop-down to be 500px wide on desktop (it looks fine on mobile), and I need the right side of the search results box to align with the right side of the search text box.

• This topic was modified 7 years, 9 months ago by hartliep.

[Ernest Marcinko]

Hi!

The width of the floating results is set to follow the width an float of the search bar at all times.

To change it’s width separately, I recommend using this custom CSS:

[html].asp_r {
width: 400px !important;
margin-left: -154px !important;
}[/html]

This will change it’s width to 400 pixels, and also aligns the results to the right of the search bar with a negative margin. You can change these values of course, as you like.

You can apply this code on your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

[hartliep]

That worked! Thank you! I ended up needing to wrap that in a media query, but other than that, no drama!

[Ernest Marcinko]

You cannot access this content.

[hartliep]

That is fine, and I will definitely do that. Thank you!

[Author]

Posts