How to Adjust Block Padding

This guide provides a step-by-step walkthrough on how to customize the horizontal and vertical spacing (padding) of your blocks within the Surge theme to ensure your site looks great on all devices.

Overview

Padding allows you to control the white space inside a block. In Surge, you can set independent padding values for desktop and mobile views to ensure your layout is optimized for different screen sizes.

Step-by-Step Guide

1. Select Your Target Block

In the editor, click on the specific block you wish to edit (for example, a Testimonial Video block or a text section).

2. Choose Your Device View

Before making adjustments, select the device icon at the top of the editor:

• Desktop: To adjust spacing for large screens.
• Mobile: To adjust spacing specifically for handheld devices.

3. Locate the Spacing Settings

Once the block is selected, look at the sidebar menu on the right. Scroll down until you find the Settings section.

4. Adjust Horizontal and Vertical Padding

Under the Settings section, you will see sliders for Horizontal Padding and Vertical Padding. You can adjust these in two ways:

• Drag the Bar: Move the slider left or right to increase or decrease the spacing.
• Manual Entry: Click into the number field next to the slider and type in your preferred pixel value.

5. Real-Time Preview

As you move the bar or change the numbers, the editor will auto-adjust the block layout right away. If you are editing the Mobile view, ensure the preview is set to mobile so you can see the changes in real-time.

6. Save Your Changes

Once you are satisfied with the spacing on both desktop and mobile, click the Save button at the top right of the editor to push your changes live.

See this video for a visual guide:

 

Pro Tip: Always check your mobile padding after finishing your desktop design. Often, a block that looks good with wide padding on a desktop may need narrower padding on mobile to maximize screen real estate!