Issue with Padding Display on Mobile Devices in HubSpot Landing Page Builder

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi,
I created a landing page using the HubSpot Landing Page Builder, but I encountered an issue with how it displays on mobile devices. In the editor, everything looks fine, and the padding appears normal. The same goes for the mobile preview when accessed from a laptop. However, when I open the page directly on a mobile device, the padding looks too large, and the text is poorly formatted, which creates an unattractive appearance.
Considering that HubSpot costs €2000 per month, I expected better performance and more precise design rendering. Does anyone have any ideas on how to fix this?

Here is the link on my google drive so you can see the error: Hubspot community - Google Drive
Thanks in advance!

2

Hey @Mat_Cal! Thanks for the screenshots and screen recordings to properly express the issue. I understand you’re seeing an unexpected amount of padding on the sides of your landing page on mobile, despite the mobile test properly adjusting.

This issue likely stems from the type of template being used. What theme and template are applied to your page? Adding the URL to the landing page can sometimes enable Community members to better troubleshoot the issue.

I want to invite some subject matter experts to see if they have any suggestions.

Hey @Gaurav_Aggarwal, @Jnix284, @alyssamwilie -- hope y’all are well! Do you have any troubleshooting tips or mobile responsiveness best practices to share?

Best,

Kennedy

3

Thanks Kennedy for fast reply, here is the link to website: https://web.imed.hr/krunice-ljuskice-mostovi - the theme im using here is: elevate, is is shown here: Use themes

4

Hey @Mat_Cal,

thank you for providing the detailed informations.

Usually theme errors are not related to HubSpot as a Software but rather to to the developer/company who has created the theme. Since you’re using the brand new Elevate theme, which was made available only a couple of weeks ago but hasn’t been announced officially yet*, there might be some bugs.

While I would ususally provide you some detailed guides how and where to change things to “repair” this bug, due to how Elevate is designed(code-wise) it is not possible to apply minor changes/fixes directly via the Design-Manager but instead require a seasoned developer with CLI and React knowledge.

To be fully honest, I don’t think that this new approach is a good idea, but we’ll see if it might change in the future.

What I can think of are following possible ways to go:

  1. Look into the marketplace for a different theme - most marketplace themes can be modified via Design-Manager without the CLI requirement
  2. Your portal should have a few other default themes like “Growth”. In order to use it, open the @hubspot folder in the Design-Manager, right click on it and select “Create child-theme”. Once done you’ll need to apply your styles in the theme settings(like you’ve did with elevate) and replace the template of your Landing page. My recommendation is to use the content-staging for this.
  3. Hire a developer
    1. to apply changes to “your version” of the elevate theme
    2. to create a custom theme only for you and with all the custom functionalities you’re looking for
  4. Reach out to HubSpot and inform them about this misbehaviour you’re encountering so it will be fixed in the (near) future. (I’m gonna forward this thread to the Elevate team so they can look into this)

If you’re looking for a developer, I’ll be happy to chat and help.

* We - the Developer HUG - will be hosting a live event on 27th Feb with “all-things Elevate theme” so you might want to check it out.

Hope this helps,

best,

Anton

5

Thanks so much for that info, ill try it out.

Kind regards!