Adjusting vertical height/space on a Zurb Foundation 5 based page?

Question

Using the standard out of the box configuration for Zurb Foundation on a page that has a large number of labels and input boxes.

I am trying to figure out the best way to "compress" the page vertically yet maintain legibility.

Is there a proper or best way to do this while maintaining the responsiveness of Foundation?

Answer 1

The proper way to do this is using the framework in its "sass" variant, so you can edit the _settings.scss file where you can find vars for almost every aspect, you can then:

• Reduce line height
• Reduce font size
• Reduce padding of buttons, labels and form elements
• Reduce the margin between elements

Hope this helps

Answer 2

It depends. Do you want the change globally across the entire project? If so, then ideally you would update the project's Scss settings. If not, then just add an overriding style that is specific to your page.