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;
}
}
Comment | File | Size | Author |
---|---|---|---|
normal.png | 38.23 KB | tnanek | |
narrow.png | 37.61 KB | tnanek |
Comments
Comment #1
tnanek CreditAttribution: tnanek commentedCorrecting a small error.
Comment #2
fubhy CreditAttribution: fubhy commentedThat 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.).
Comment #3
fubhy CreditAttribution: fubhy commentedNote (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.
Comment #4
tnanek CreditAttribution: tnanek commentedThanks for the help.