The width is not adjustable because it fits the container elements width. So if the search is in a 300 pixel wide container it will fit to that and becomes 300 pixels wide.
I will try to explain how that particular search works on the demo page. What you see there is a section, which is divided into 2 equal pieces, each piece is half of the width of the section. The section width is not set to an exact value, because it’s different for each device (desktop, mobile etc..)
This is achieved with a theme shortcode. We are using the district theme, and it has these shortcodes to divide the content into colums. So after dividing that section into 2 colums, one of them holds the search shortcode, the other one holds the results shortcode for that search instance. Your theme might not support these colums, so I will try to make an example code of how to achieve this without the theme shortcodes. Take a look at this code:
If you paste this code to the post/page editor – not the visual editor, you must switch to the Text editor – then after saving you will possibly see a search box that’s half the width of the content.
Now after switching the layout mode to blocking (see link in the previous post), if you type in something the results should appear next to the search box, instead under it.
The pagination style is called the “Isotopic” layout. So if on the layout options panel you change it, then you should see that layout. https://i.imgur.com/coA58ga.png
Let me know how it goes. I hope I didn’t confuse you. The search has a lot of options, it takes some time to get used to it.
I might not answer today, I got some real life stuff to take care of. Good luck with the experiments.
-
This reply was modified 9 years, 11 months ago by
Ernest Marcinko.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
