Modern Events - Search Form Width

[Anantha]

Hi ,
I added MEC search form to my events archive page. I would need only three search criteria: Location , Month and Keyword input
After adding the three search entries through the plugin , the search form displays Location dropdown (100% width ) in first line followed by Month and Keyword(50% width each ) in next line

This looks odd and i would like to see all three search components in the same line equally spaced

Please support

[Prasant]

Hello @Anantha,

Thanks for asking.

Can you please share exact page URL? I tried looking at your website that’s attached to the license but I am unable to find out.

Thanks.

[Anantha]

my bad i forgot to attach , here is the url:
http://www.seyal.co.in/browse/

[christian]

Hey @Anantha,

First, please note that the MEC plugin does not offer additional layout other than what you currently see. I’ll give you some custom CSS to achieve what you need but note that, we will not support issues that will arise from the use of it or provide further enhancement. Here’s the code:

.mec-search-form .mec-dropdown-wrap {
    width: 33.3333%;
    float: left;
}

.mec-search-form .mec-dropdown-wrap .mec-dropdown-search {
    display: block;
    float: none;
}

.mec-search-form .mec-date-search {
    clear: none;
}

.mec-search-form .mec-date-search, .mec-search-form .mec-text-input-search {
    width: 33.3333%;
    display: inline-block;
}

@media (max-width: 767px) {

    .mec-search-form .mec-date-search, .mec-search-form .mec-text-input-search,
    .mec-search-form .mec-dropdown-wrap,
    .mec-search-form .mec-dropdown-wrap .mec-dropdown-search {
        width: 100% !important;
    }

}

You can add it to your page’s Content CSS to apply it only to your “browse” page.

Hope that helps and thank you for your understanding.

[Anantha]

Works Perfectly on all screen sizes - Thank you !!!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.