- This topic has 4 replies, 2 voices, and was last updated 7 years, 9 months ago by
.
-
Posts
-
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.
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.
That worked! Thank you! I ended up needing to wrap that in a media query, but other than that, no drama!
- The topic ‘Customize Search Results Width’ is closed to new replies.