Drupal Panel Pages, CSS and Mobile Tip

If you use Panels for your layouts, add a column CSS class to the most left hand column of your layout. Since Adaptive Themes will place this column first after the header stuff, this class will more easily allow you to adjust the margins of your content relative to the header.

You’ll need to add a custom style to the column in the Page Manager layout. If you choose no stylistic choices at all you will wind up with something like this selector:

.region-plain-box-fp-25-left-col {
  1. background-color: #ffffff;
  2. color: #000000;
  3. margin-bottom: 10px;
  4. padding: 10px;


Note that the Administrative title (so that it can be reused) that I have used will show in the selector. Since I have added this late in the development, I have to adjust it to the current style of my page.
.region-plain-box-fp-25-left-col {
  1. background-color: rgba(0, 0, 0, 0);
  2. color: #000000;
  3. margin-bottom: 0;
  4. padding: 0;
  5. margin-top: -59px;
 I have added the Margin-top parameter to move all the content closer to the header for the 320px width layout. Sort of a hack, but a really useful one!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: