Search field on mobile device doesn't seem responsive

Anonymous

#45555

Hi,

When I go to http://www.ymphony.com on my mobile device (iPhone), the Search field text box doesn’t seem responsive. I’m wondering if the Search field text box should be on another line in itself so that a it will look ok on a mobile device. Is there CSS script that I can apply for the Search field text box to accommodate both mobile and desktop?

Additionally, can you help me to expand the Search text box to be longer in length (longer width). Thanks!

Trevor

#45562

You can alter widths to percentages (of the outside container), and you can use CSS media queries to target certain devices. I do not know what break points your theme uses, but I would be inclined to make the form vertical at 767px and under. So, the custom CSS you have to make it horizontal, put that inside a media query like this:

@media only screen and (min-width: 768px) {
// your horizontal CSS code here
}

You will probably need to set the li elements to width: auto and the widths of the elements themselves as I said to percentages or pixel widths.

[Author]

Posts