Weird search box resizing behavior

Toolie

Hi there, I put my logo and the search box in a row of its own split 6+6 and when I change pages, the search box resizes. I found where the calculation of the size was in one of the CSS files and put in my own CSS to make it a static measurement, and it still resizes when going from page to page. The smallest size is on the Home page, and when the page contains a blog layout or a single-article layout, the search box resizes larger, and I cannot seem to stop it.

How do I stop this quirky behavior?

I prefer the smaller-sized search box. This site is supposed to go live on Tuesday 13-Feb-2024, so your prompt help is appreciated!

dominic

Hi pavit,
You can create the templates/ja-vital/css/custom.css file and use the following CSS code:

.js-finder-search-query.form-control {
    height: auto !important;
    padding: 17px !important;
}

Toolie

First of all Dominic, thank you for answering my question on a weekend! I applied your CSS and the search box still jumps around a little from side to side, but not as much, and it doesn't resize vertically, which is more important. Thank you!

cssyeah

Hi @Toolie,
Please add the box-sizing attribute to the above code and it will solve your problem.

.js-finder-search-query.form-control {
    height: auto !important;
    padding: 17px !important;
    box-sizing: border-box; /* Update new properity*/
}

Kind regards,

Toolie

Thank you, that's much better! The box is staying vertically and horizontally stable sufficiently. I think we can close this thread.