Other articles in this category
Search More Content
Margins and padding
The Blackbaud Builder has the following built-in spacing defaults.
- Rows and columns have default margins and padding.
- Modules have default margins.
- An auto spacing feature for small devices is enabled by default.
This feature reduces spacing automatically on mobile devices. This means the layout should look decent at all device sizes without any special effort at manual settings – unless you want to tinker.
If you do want more control, you can change the margins and padding of individual rows and columns, and you can change the margins of individual modules. You can set different values for each device size.
In this article we’ll describe a simple approach to adjusting margins and padding if you’re new to the Blackbaud Builder.
A quick review of the CSS box model
As shown in the diagram below, the width and height of a border box apply to the content area. The padding, border width, and margin are added to that. Padding is inside the border; margins are outside the border.
Exception: If the box-sizing property is
border-box, the width and height properties include content, padding, and border.
Tips for setting margins and padding at various device sizes
The interactions among the various ways to set margins and padding at various device sizes can get rather complex, but here’s a recommended basic method for approaching it.
- Lay out your page first for large devices (desktop). As you get more familiar with how the Page Builder adjusts margins and padding for mobile, you can switch to a “mobile first” approach if you want.
- Lay out your entire page before you start adjusting margins and padding, so you don’t have to keep redoing them as you move items around on the page.
- Make adjustments to individual margins and padding for large devices on the Advanced tab of individual rows, columns, and modules.
Tip: Blackbaud Builder modules have margins but don’t have built-in padding. An easy way to increase padding for a module is to wrap it in its own column, then change the column padding.
- Once you’re happy with your settings for large devices, check the settings for tablets and mobile devices. Go back to the Advanced tab and click the icon next to the Margins or Padding section to change the view, as shown in the following animation. Clicking this icon opens Responsive Editing mode, which lets you edit directly in the medium- and small-device views. See the Related Video about Responsive Editing Mode.
By default, whatever value you enter for desktop is also used for tablets, but you can change set specific values in tablet view.
For mobile devices, the auto spacing feature automatically reduces the top, bottom, left, and right margins in rows, columns, and modules. It also reduces the left and right padding in rows and columns. You can override auto spacing by entering a specific value in mobile view.