Home/ Questions/Q 8785167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T21:17:05+00:00

I have a WordPress website that’s using the Twitter Bootstrap framework. Here’s the website:

  • 0

I have a WordPress website that’s using the Twitter Bootstrap framework. Here’s the website: http://www.vickieats.com/

I’m trying to style the search form for a website very similar to the search form that they use in their example page (http://twitter.github.com/bootstrap/base-css.html#forms). However, the search button winds up being much bigger in height than the input element, and my goal is to make them the same height.

I think there’s an CSS style that’s overriding what I’m trying to do, but I’ve used FireBug to death and can’t find the answer. Or it could be something very simple that I’m overlooking.

Either way, any help is appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this to the end of your stylesheet (section or file)

    input.search-query {
  line-height: 30px;
  padding: 5px;
  height: 30px;
}

    When adding this in Chrome Inspector the search box is aligned with the button. It doesn’t matter that you already have declared input.search-query. It seems that you really could clean up in the CSS, though, padding-right defined more than once, and so on.

    Partly screenshot of the result http://tinypic.com/view.php?pic=2lmtnht&s=6

    • 0