Theming

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

Last updated
Categories

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

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.

Additional resources

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