Hi all. I’m having an issue in which I can’t figure out why the top of my main content area appears different on mobile v. desktop. I have a top bar that is fixed 48px tall. I then have a main content area with a 48px top margin. The content then adds its own margin. It appears correctly on desktop, but on mobile there isn’t enough space. Any idea what’s going on?
Edit: I’m having the same issue with the footer container. When the responsiveness kicks in at 960px, the footer loses its top margin too. The problem must be related.
Not sure if I understand the issue, but try this and let’s find out.
style.css (line 27)
form {
padding-top:30px; /* ADD Me */
}
style.css (line 289)
#instructions {
margin-top:30px; /* DELETE Me */
}
When #main_column_content is changed from table-cell to block, the 30px of margin-top assigned to #instructions collapses into the margin-top assigned to #main-container. The easiest way to prevent this margin-collapse is to assign padding-top to the form (if I have understood the issue).
Thanks, but that may only fix the index page, which has a form, and not the other pages on the site (there are two other page content types). Why is the #main_container margin disappearing on collapse?
Oh — fixed! I understand now. I was under the impression that margins are like outer padding in that they can be added together if there’s a margin-bottom on an upper object and a margin-top on a lower object. Apparently that’s not the case.
Margin collapse is a complicated subject that even fairly experienced coders don’t understand. To understand margins you also have to understand block formatting contexts as margins between these elements do not collapse.
To understand margins you also have to understand