Theming

Adapting a Fixed-Width Search Form to Flex with Its Container for Drupal 7

Last updated March 5, 2020
Categories

Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources

Sprout Video

In the original theme, the width, margin, and padding of the elements that make up the search component are set using pixels. Since the width is static, it's breaking out of the sidebar region when the screen size is small enough. 

In this lesson, we'll refactor the styles in the search form so that it flexes with its parent container, instead of breaking it. In working through this example, you'll learn the merits of keeping components flexible and respectful of their parent containers.

https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 12-search-form)