Hi HubSpot Community!
I need help pushing the desktop design to the mobile version
I tried to adjust the sizes and even create it through a layout but it still won’t work. Thank you!
Hi @JodieFoster,
HubSpot automatically adjusts the email to make it responsive. Up until recently, there was no way to configure this behavior but luckily, there is a new beta:
Marketing Email
Mobile Optimised Email
October 22, 2024
What is it?
You can now optimise your drag and drop marketing emails for mobile, enhancing your end recipient experience, improving engagement rates, and ultimately drive higher conversions.
This rollout provides the ability to hide modules and sections on both mobile and desktop, as well as changing the layout and disable automatic column stacking on mobile.
Why does it matter?
Mobile devices are an increasingly popular way for customers to view email campaigns, meaning it’s now more important than ever to design with mobile devices in mind.
The new Mobile Editor for Marketing Email will enhance the email editing experience that visualises how and where more receipients are opening their emails.
How does it work?
Change visibility of modules and sections on mobile:
To customise which modules or sections appear for desktop or mobile recipients:
- In your HubSpot account, navigate to Marketing > Marketing Email.
- Click the name of a drafted email, or click Create email in the top right to create a new email.
- Click the desktop desktop icon or mobile mobile icon at the top of the email editor to view and configure the settings for each device type.
- Hover over a module or section and click the hide hide icon to hide that module in the version of the email you’re editing.
- To show all hidden modules for a version you’re editing, click Show all hidden at the top of the email editor.
Change layout or stacking on mobile:
To configure different column layout settings between mobile and desktop devices:
- Click one of the email sections.
- In the Layout section in the left pane, toggle the All devices switch off, then configure the column layout for Desktop and the stacking layout for mobile.
Change styling of a section on mobile:
To customise how the background or spacing of a section of your email appears for desktop or mobile recipients:
- Hover over and click a section.
- In the Background or Pacing section in the left pane, toggle the All devices switch off, then configure the background or spacing styling for Desktop and for mobile.
Change template styling on mobile:
To customise how the template background or spacing of a section of your email appears for desktop or mobile recipients:
- On the left panel, click Design
- In the Template section in the left pane, toggle the All devices switch off, then configure the background or body colour for Desktop and for mobile.
Knowledge Base Article PW: Email_151887
Who gets it?
Marketing Pro, Marketing Enterprise
Learn More:
Join the discussion on our Community
Learn more on the Knowledge Base
You can find the beta here:
Hope this helps!