Search button in mobile view won't comply with the layout

Question

The button itself has the 'search' label, the input box and then the search button.

I have tried using various css changes such as margins to either get the button to stop sticking to the search input box and give it some breathing room when in a mobile view (small resolution) or get it to spread out lengthwise just like the main menu above.

Altercations to the search button while in the mobile view works but it also aligns it incorrectly it when in a wider/full resolution. I'm not sure what tags would be suitable to get around this.

http://goo.gl/3IsBZR

The link above is the website on the search page.

Answer 1

You have to use CSS to target the button more exactly. A combination of media queries and CSS selectors should allow you to style it as needed.

You can select a HTML element with CSS using any attribute, e.g. to select the search button only, try this:

@media (max-width: 380px) {
    button[name="Search"] {
      width: 100%;
    }
}

If you'd rather target the input box in order to place some air around it, try this:

#search-form input#q {
  margin-bottom: 20px;
}

If you CSS style affects other elements too (like you mention in your comment to another answer), you have to use a more specific selector.

Answer 2

I cant understand your question exactly but i take a little bit idea.

You want that when you the size 767 px on which small menu (offcanvas) appears, here you want that your button should be lengthwise like your menu ..

so just apply a media query and give it width 100 %. I hope that you asking for this.

Answer 3

To solve this I had to apply vertical-align to the label, form-inline & search-button. A margin-bottom to the form-inline.