How to fix search box CSS for iphone/ipad?

• tandan

  said

  hi there, i bought the theme thinking the layout was flexible for the iphone/ipad and other mobiles but when i view on an ipad or iphone the CSS buttons I was using in the sidebar would break and look awful. so i made buttons and solved that issue. however, the search widget seems to also break onto two lines…i have no idea how to fix this. can you please help?
  thanks so much!
  you can view site at http://www.vna.mpwclient.com
  check it out on an iphone and you’ll see what i mean. i can’t take a screenshot easily…sorry!

• andy

  said

  Sorry for the delay, I was out of the office visiting family.

  I’m not sure why the search is going to a second line in the iPad/iPhone view but it’s probably because of how the browser makes adjustments to the text widths automatically with it’s zoom. I don’t have a way to test this. Sorry.

  I deleted your “bump” of this comment because I work from oldest to newest and you basically put yourself at the back of the line by doing this. I didn’t want you to have to wait another day for a response so deleting this moves you back to the original place “in line”.

• tandan

  said

  Hi there, actually, it’s also showing up on regular web browsers. I’m see it on Chrome…let me know what I should do…
  Thanks!

• andy

  said

  It sounds like you can adjust the search input width to fix this. The way you can set the layout for your site, the search and other widgets are not really able to simply adapt to their widths so using a narrower column and placing the widget for search it’s possible the styling is expecting a larger area.

  You can add something like this to your Custom CSS area in the default design settings (Appearance > Design Settings)

  #searchform input#s { width: 100px; }

  Adjust the “100px” as needed to get the search to appear on a single line.