How To Edit Your Website on Mobile with Generator Theme 📱

Generator is built to be fully responsive out of the box. All pre-built templates automatically adapt to smaller screens, and modules stack cleanly thanks to the theme’s drag-and-drop structure. Still, there are times when you’ll want to fine-tune the mobile layout.

This guide walks you through how mobile editing works inside the HubSpot page editor when you're using the Generator theme—and the specific adjustments you can make to perfect the mobile experience.

How Generator Handles Mobile Layouts

Generator uses a simple hierarchy:

• Modules → live inside

• Columns → which live inside

• Sections

This drag-and-drop system is what gives you control over structure on desktop. On mobile, Generator automatically stacks columns vertically so content naturally flows top-to-bottom.

To switch to mobile editing:

1. Open your HubSpot page.

2. Click the mobile icon at the top of the editor.

3. You’ll now see a mobile-specific view where you can make adjustments that won’t affect desktop.

1. Hiding Elements Only on Mobile

Sometimes an element looks great on desktop but feels unnecessary—or too large—on mobile.

To hide a module on mobile:

1. Click the module you want to hide (example: an image).

2. Select Hide on mobile.

On desktop, the module stays visible. On mobile, it disappears from the layout.

If you ever need to bring it back:

1. Open the Site Tree in the left sidebar.

2. Find the hidden module.

3. Click Restore.

2. Adjusting Mobile Spacing (Margin + Padding)

Generator already optimizes spacing for mobile, but when you're building your own layouts—especially with two columns side-by-side on desktop—you may want to refine spacing manually.

Example: Adding Space Between Stacked Elements

If a button in one column bumps up against an image in the next column once stacked on mobile:

1. Hover over the column containing the text/button.

2. Click Style Column.

3. Go to Alignment & Spacing → Margin bottom.

4. Add margin until the spacing looks good.

This margin applies only on mobile when added from the mobile view.

3. Managing Desktop Padding That Doesn’t Belong on Mobile

A common mistake is adding padding to a column on desktop—for design spacing—and forgetting to remove it for mobile.

Example:
You added 40px padding-right on desktop so an image isn’t too close to text. Looks great on desktop. But on mobile, where everything stacks, that spacing becomes excessive and tightens the layout.

To remove it on mobile:

1. Switch to the mobile view.

2. Hover over the column → Style Column.

3. Set Padding Right to 0.

Desktop padding stays exactly as you set it. Mobile gets a clean, full-width layout.

Summary: What You Can Adjust in Generator’s Mobile Editor

✔ Hide individual modules only on mobile
✔ Add or remove spacing between sections and columns
✔ Override padding that only applies to desktop
✔ Make mobile-only adjustments without affecting desktop
✔ Use the Site Tree to restore hidden elements anytime

Generator handles most mobile optimization automatically, but these tools give you precise control when you want to fine-tune specific layouts.