I am creating a subtheme. Using media queries, I have the display changing at 768px from a standard one-sidebar site to a mobile friendly full width site.

Problem comes when on the full width version. There's a whitespace on both top and bottom of .l-region--sidebar-first and .l-region--sidebar-second. I've tried making their borders, margins and paddings to 0 (even negative) with no help. This attached version of my stylesheet only tries to eliminate the space between the first-sidebar and the content, figuring no extra wrappers are in the way in that one, but it still doesn't seem effective.

I am testing with Chromium on a Linux machine, the applicable css is below, otherwise there shouldn't be anything impacting the layout.

@media screen and (max-width:767px) {
  [role=main],
  .l-region--sidebar-first,
  .l-region--sidebar-second {
    width:100%;
    padding:0;
    margin:0;
  }
  [role=main] {
    padding-bottom:0;
    margin-bottom:0;
    border-bottom-width:0;
  }
  .l-region--sidebar-first {
    padding-top:0px;
    margin-top:0px;
    border-top-width:0px;
  }
}
CommentFileSizeAuthor
normal.png38.23 KBtnanek
narrow.png37.61 KBtnanek
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

tnanek’s picture

Issue summary: View changes

Correcting a small error.

fubhy’s picture

Status: Active » Fixed

That is correct and expected behavior. It's called 'collapsing margin' (you can google that). It's a core CSS/HTML concept and not specific to Omega. You should be able to find further explanation of that concept on google. http://www.w3.org/TR/CSS2/box.html#collapsing-margins

There are several ways of preventing this from happening ('border-top: 1px solid transparent;' or 'overflow: auto;' on the wrapper, etc.).

fubhy’s picture

Note (in case I didn't make that clear properly): This is part of the spec and simply how the box-model currently works in CSS.

tnanek’s picture

Thanks for the help.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.