How to Style HubSpot Sections

Accessing Section Styles

To style a section, hover over it and click the pencil icon. This opens the style panel for that section.

Setting Visibility

In the style panel, you can control where a section appears. Use the Visibility options to hide a section on desktop, mobile, or both.

Adjusting Alignment and Spacing

Click Alignment and Spacing to control vertical alignment of the section's content — top, middle, or bottom.

Overriding Max Content Width

By default, all sections follow the global theme setting of 1200px max content width. For single-column sections (like an FAQ or a block of paragraphs), 1200px is often too wide. To override it:

1. Click Center Content in the Alignment and Spacing panel.
2. Reduce the Max Content Width to a narrower value — around 700px works well for single-column text.

Note: "Center Content" is HubSpot's terminology for enabling the max content width constraint. "Full Width" ignores it entirely and stretches content to the browser edges.

Overriding Padding

The top and bottom padding defaults to the global spacing values set in the theme settings. For sections where you don't want that default (e.g., 100px top and bottom), you can override those values here per section.

Setting a Background

In the Background panel, you can set a section's background to:

• None
• Color
• Image
• Gradient (one-directional only in native HubSpot)

For multi-directional or radial gradients, use the custom GradientBG module included with the Generator theme. It supports multiple radial gradients and produces more visually complex backgrounds.

Mobile-Specific Adjustments

At the bottom of the style panel, you can set padding and margin values specifically for mobile. These values only apply on mobile breakpoints and won't affect desktop layout.