I’m putting together a responsive site that needs 6 icons at the bottom. I’m using Backdraft 1.5 and using the six wrapper module as my template. All works fine until I shrink the page so that the icons go to 2 columns on 3 rows. The bottom row jumps out of alignment with 1 icon lower than the other.
When I check the template module it works fine, it only misbehaves when I put my pics and text in
The div ID #sixSix requires a margin-left: 0px; for the @media screen and (max-width:570px) breakpoint (theoretically).
But you know what?
This is pretty interesting cause at the latest breakpoint, the sorting order changes (as in the basic template as well). The “three” will get four and vice versa.
I’d call this lil buggy and has to be fixed by Caleb (changing floats for the objects and fixing margins by default).
This is one reason, why I teach my subscribers not to float right the last col (in my terms “grid”) cause I don’t see any reason for it (these days - in the past there had been a Firefox issue with it).
Another point is, that I teach as well using one non-semantic DIV more to avoid the fractal percentage values (but that’s another point).
Both are the main differences between our two products backdraft and screencasts (just for all BD followers).
Tried using R & D, Dave, and it didn’t make any difference. Hadn’t noticed the percentages being out. I will have a go at adjusting, but if I have no joy, I’ll pester Caleb
Have you by chance modified the backdraft.min.css file in any way? When I run a diff on your CSS file compared to the one that shipped with BD 1.5 it shows that quite a bit of the CSS that works with the six column module has changed. Some of those modifications caused the problem that you are seeing here.
