Responsive search form

[Patrick Merck]

Hi,

please have a lookt at the search form here:
http://www.gesundes-kinzigtal.de/das-richtige-angebot-finden/

Could you tell me how to get this responsive? When resizing the screen or watching this site on my mobile, the search form looks “broken”.
I’m looking for a solution where the field jumps/wraps when resizing the screen.

Help. Please 🙂 (I would also be thankful for a hint)

regards,
bastian

[Stephen Harris]

Hi Bastian,

I would recommend using CSS media queries. You can re-style the search form based on the width of the device. On ‘smaller’ devices, you could stack the search fields vertically. You can configure the breakpoint by changing the 768px value below:

@media (max-width:768px) {
 .eo-event-search {
         margin-bottom:30px!important;
 }  
 .eo-event-search ul {
         float:none!important;
         margin-bottom:20px!important;
 }
 .eo-event-search li {
         width: 100%!important;
 }
}

Just add that to your theme’s style.css

Hope that helps!

[Patrick Merck]

Perfect.
Works like a charm.

Thank you Stephen!

[Author]

Posts