I’ve read some conflicting approaches on how to manage vertical spacing when designing responsively, and wanted to get clarity from the Finsweet team on what the accepted (internal) approach is to this issue.
Example: The design of our current build requires copious negative space above and below a section’s content area. We’re using padding-section-large and created our own padding-section-huge to achieve parity with the design. The desktop build works well with this approach using the built-in classes. Switching to tablet and mobile views, however, is problematic; it retains the same amount of space visually and doesn’t scale to smaller padding sizes gracefully.
This makes sense if the philosophy is to remain agnostic and allow the individual designer to decide how that spacing should appear on tablet and mobile devices, but I want to develop good practices early in the process so we do not have to fix non-standard implementations later on down the road.
The simplest solution appears to be, enable tablet view, override the spacing, and then move down to the next view.
How does Finsweet tackle this issue?
The same thing goes for the spacing blocks, which is the method we’ve adopted. Using a “spacer-large” below a header, for instance, looks great on desktop, but doesn’t work well for mobile. It feels wrong to simply override this ourselves – like we’re missing something.
This request probably seems rudimentary, but I could not find anyone that knew the official approach to this use case and thought it best to ask. I have an extremely particular approach to following standards, even after two decades of doing this work.
Thanks so much for the feedback!
