I’m trying my first go with Backdraft and I’ve run into a problem with my two column layout on vertical orination with the iPad mini. The four column layout at the bottom page is messed up too. Before I start adjusting the breakpoints, I thought I would check in with you guys. I’m sure I did something wrong!
What breakpoints to you guys plug in? I know I don’t want to attempt to account for every device, but what have you guys discovered as a “best practice.”
I just checked this page on a full sized iPad and it’s doing the same thing. I think the resolution is similar between the two devices, so that makes some sense.
Backdraft template has break points established at 720 & 920 and it looks fine in freeway. Anyone know what breakpoint is necessary for the iPad in vertical orientation?
I would suggest not getting hung-up on device-specific breakpoints. The design and layout should determine breakpoints not the other way around. If you need a 768 bp then of course add it, but don’t do it simply because it’s an iPad.
What breakpoints to you guys plug in? I know I don’t want to attempt to account for every device, but what have you guys discovered as a “best practice.”
I understand your point, Todd. But the fact is the layout looks horrible on an iPad and this is not acceptable. I’m wondering if I did something wrong. If I don’t hear any other options, I’ll try adding a 768 BP and see what happens.
It looks like you may have removed the Box Sizing (FW7) action from the columns which is causing the layout glitches. Either that, or the action is not working properly.
If you did remove the action, you will need to reapply it to the “twoLeft”, “twoRight”, “fourOne”, “fourTwo”, “fourThree”, and “fourFour” elements. Make sure that you have “Convert width to percentage” checked in the action settings.