Check your version

This video 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: 

Restoring the Natural Flow of Elements

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:03
    Restoring Natural Flow of Elements
  • 0:05
    with Amber Himes Matz
  • 0:08
    Absolute positioning
  • 0:10
    can be a blessing and a curse.
  • 0:13
    In the case of our header, as we have converted
  • 0:15
    the absolute static widths of our regions into relative percentages,
  • 0:20
    some elements placed with absolute positioning
  • 0:22
    are not looking how we want.
  • 0:25
    The theme of our new theme is flexibility, and in that spirit,
  • 0:29
    let's work on putting our header elements back into the natural flow

Restoring the Natural Flow of Elements

Loading...

While it's not forbidden to use absolute positioning in responsive designs, the way that absolute positioning was utilized in the original theme is less than ideal as we work on moving theme toward flexibility, fluidity, and responsiveness. 

In this lesson, we'll focus on putting elements in the header back into the natural flow of the document. We'll refactor some HTML and CSS, removing absolute positioning declarations and change the source order of some elements in our page template file.

Restoring the natural order and flow of the document will make things easier for us down the road as we adapt our components to stack into one-column in small screens.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 07-08-flow-media-queries)