It has become increasingly important to make sure your layout doesn't break when viewing your Website on a phone. So what do you do when, in Android or Google Chrome, you notice that your layout is blowing out because of an especially long word (or line of unbroken text, like a URL)?
Recently, while working on a mobile version of a Website, I was asked to hide the search bar that's traditionally at the top of a web page, and replace it with a clickable button. When clicked, this button would in turn reveal the search bar. The idea behind this user interaction was to save valuable screen real estate by hiding the search bar, which is only occasionally used.
I used CSS (display:none) to hide the search bar initially, and to display the button that would reveal it.
Here's a little legend to explain what my elements are in the examples below: