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: 

Calculating Responsive Margins and Padding

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
    Calculating Responsive Margins and Padding
  • 0:05
    with Amber Himes Matz
  • 0:08
    In the process of converting our font sizes from pixels to ems,
  • 0:12
    we noticed some margins and padding declared in pixels as well.
  • 0:16
    Margin and padding have distinct context,
  • 0:18
    and so to successfully apply our target divided by context formula,
  • 0:23
    we need to identify the correct context.
  • 0:26
    In this lesson, we'll determine the appropriate context
  • 0:30
    for each declaration, apply our trusty formula
  • 0:33
    to get our result in relative units, and finally, update select padding

Calculating Responsive Margins and Padding


As we've been converting our font-sizes to ems, we've noticed other properties that need updating, including margin and padding. In order to correctly apply our target ÷ context = result formula, we need to know the appropriate value for "context." Converting padding presents us with a new context, different than that of a margin. In this lesson, we'll learn how to determine the appropriate context and convert padding and margin pixels to relative units.

Log in or sign up to download companion files.
Additional resources: (Checkout branch 05-responsive-padding-margins)