Horizontal align of form fields

[Christian Hardt]

Hello there, I bought your plugin yesterday.

Right now it looks like this:

http://fewo-unterbastorf.dertester.de/

Can you see it under the slider and image?

I want it looking like here:

Home

Can anybody please give me the css code, so I can make it horizontal and not vertical (the search fields).

Kind regards

[J. Davis]

Hi Christian,

Yes, it depends on styling and your theme layout in particular. You can add custom styles and apply them for your Search Form to make it horizontal. There is no unique CSS snippet as everything will need adjustments.

Best regards,
John

[Corey Auger]

Disappointed in motopress for not helping with this one. It took me hours to figure out what is simple CSS. The horizontal search form looks so much nicer. Anyway here you go:

Add the following custom CSS to the search form. For me it looks like this:

.mphb_sc_search-form {
display: flex;
flex-wrap: nowrap;
}

You’ll need adjust the css for each of the inputs and labels so that it looks nice, but this at least gets you to a horizontal view! Use developer tools to figure out the rest. Good Luck!

• This reply was modified 6 years, 6 months ago by Corey Auger.
• This reply was modified 6 years, 6 months ago by Corey Auger.

[J. Davis]

Hi Corey,

Thank you for your feedback. We have this feature in our to-do list and we’ll provide a solution as form option soon.
However the code you provided is not responsive and is applied for all the forms added with shortcode even where you do not need this to be horizontal. Thus we recommend to add custom class with proper style hat is applied for laptops and desktop devices only e.g. you can add the style bellow to Appearance>Customize>Additional CSS:

@media (min-width: 1024px) {
.custom-form-horizontal-layout .mphb-required-fields-tip{
display:inherit;
}
.custom-form-horizontal-layout p{
display:inline-block;
width:auto;
}
}

After that apply new added class to the shortocde of search form by adding class="custom-form-horizontal-layout" to the shortcode e.g.:

[mphb_availability_search class="custom-form-horizontal-layout"]

It is possible to order a style customization with Extended Support offer

best regards,
John

[Corey Auger]

John, thank you for your description of the solution–very much appreciate it.

I did some reworking of the code and came up with this. i’ll definitely try your method and see how it goes.

.mphb_sc_search-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

[J. Davis]

Hi Corey,

Thanks you for your reply. However this code needs adjustments too as width of form fields might be different in other themes and I’d recommend to wrap it into media query to apply code for desktop and laptop screen e.g.

@media (min-width: 1024px) {
//your CSS here //
}

best regards,
John

[Author]

Posts