Reply To: Form's design distorted on two pages

Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Form's design distorted on two pages › Reply To: Form's design distorted on two pages

June 7, 2017 at 2:17 pm #13413
Ernest Marcinko
Ernest Marcinko
Keymaster

Hi Matteo,

That is not actually an ajax search pro search bar, but I believe I can still help you 🙂
The reason is that the input and the button are set to be as a ‘block’ layout elements, therefore both of them occupy on ‘chunk’ of the site space horizontally.

To get around that, the best way is to set their parent element (the form) to have a flexible display property, so all of the elements (input and the button) will be spaced dynamically next to each other, occupying the same horizontal space – and their width will be calculated by the browser accordingly.
To achieve that, use these custom CSS rules:


#searchform {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#searchform .screen-reader-text {
    display: none;
}

#searchform input[type=text] {
    margin-right: 16px;
}

These will result in the following layout: https://i.imgur.com/djrBoOH.png

I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)