topic Re: Editing Mobile Version of Landing Pages without CSS in Blog, Website & Page Publishing

Editing Mobile Version of Landing Pages without CSS

TashaNBillettt — Mon, 27 Feb 2023 19:07:19 GMT

Hello! I am having an issue with a landing page that was created in HubSpot, the mobile version needs adjustments (moving modules), here is the landing page and some screen shots of the mobile issues. Any ideas on if changes can be made or how to avoid this issue in the future? https://info.prlabs.com/ihs-conference

Re: Editing Mobile Version of Landing Pages without CSS

danmoyle — Mon, 27 Feb 2023 21:03:11 GMT

@TashaNBillettt I think it somewhat depends on the theme and the theme creator, but here's a HubSpot resource to customize your drag and drop content on mobile devices.

- Landing Pages: In your HubSpot account, navigate to Marketing > Landing Pages.

Hover over your page and click Edit.
In the top left of the sidebar editor, click the mobile Edit for mobile icon.

Click a module to customize how it appears on mobile devices.

Hope that helps!

Re: Editing Mobile Version of Landing Pages without CSS

TashaNBillettt — Mon, 27 Feb 2023 21:36:54 GMT

Thanks Dan, unfortunately it will only allow me to adjust the margins and padding at most, I do get the error message that I can only make changes from the desktop editing mode, do you know why it might be saying this? It looks like I can probably make changes if I want to use CSS but trying to stray away from that as I am only a beginner

Re: Editing Mobile Version of Landing Pages without CSS

danmoyle — Tue, 28 Feb 2023 13:01:46 GMT

@TashaNBillettt the error message - are you editing on a laptop or desktop? Or are you editing on a tablet or mobile? That's my guess for that.

As for the other changes, which theme are you using? Is this a theme you got from the marketplace or is it one of the two HubSpot themes? I'd ask the theme creator if they can help.

Sorry it wasn't an easy, "Here's the place" kind of answer.

Re: Editing Mobile Version of Landing Pages without CSS

TashaNBillettt — Fri, 03 Mar 2023 22:31:39 GMT

Hi Dan, one other issue I am having is that edits to the mobile are not saving. How can I save these changes if I am hiding a module or changing the margins to the mobile version?

Re: Editing Mobile Version of Landing Pages without CSS

danmoyle — Mon, 06 Mar 2023 14:41:11 GMT

@TashaNBillettt which theme are you using? Have you asked the builder? This sounds like a theme issue, not a HubSpot platform issue. I'd ask the theme builder.

Re: Editing Mobile Version of Landing Pages without CSS

TashaNBillettt — Mon, 06 Mar 2023 15:01:52 GMT

I hope this is not a dumb question but how do I find that information on what theme and who the builder is?

Re: Editing Mobile Version of Landing Pages without CSS

danmoyle — Mon, 06 Mar 2023 15:24:30 GMT

Not dumb at all. You can find the theme in a couple of places.

Setting > Tools > Website > Themes. Here you'll see your active themes.

Also, when you create a page, there's a spot in the settings where it lists the page template and the theme.

From there, you should be able to either search the asset marketplace for the theme name and the creator. Or a Google search.

Hope that helps!

Re: Editing Mobile Version of Landing Pages without CSS

DBates17 — Fri, 11 Aug 2023 13:50:37 GMT

Hi Dan, I am experiencing the same issue and it does not seem like a theme issue. Usually when working with websites, the "theme" dictates what colors and fonts and layouts you are choosing to work with.

In this example, I have some rich text that looks great on the "desktop" version of my landing page but looks terrible on the "mobile" version.

I do not wish to edit the desktop version of my landing page and I only want to edit the mobile version.

So i duplicated the section that I wished to edit for mobile and I marked the desktop section to be "hidden" on mobile viewing and the mobile section to be "hidden" on desktop viewing and the builder did not seem to register that setting change...

when I was on the desktop view it completely hid the section that I wanted to be displayed on the desktop view and same for the section that I wanted to be displayed on the mobile view.

I worked with a few different web building platforms and it just seems like hubspots builder tools aren't totally in sync and they're not very user friendly at all. I'm trying my hardest to make this work but when the sections aren't responding in a way that match the settings that I am putting in place it can be very frustrating.

Re: Editing Mobile Version of Landing Pages without CSS

danmoyle — Mon, 14 Aug 2023 12:44:09 GMT

@DBates17 full disclosure - I'm not a web developer. I've used HubSpot since 2010, and have found great success. But I'm not well-versed in coding & development.

What I do know, is that while yes, themes dictate simple functions like font and color, it also includes the modules on which the page templates are built. Some modules are standard, and some are custom. So when I suggest asking the theme builder, it's because sometimes what they've built has quirks or custom modules.

As for your issue you're running into, that sounds frustrating. If I were in your shoes, I'd start with some of the HubSpot Developer documentation. It sounds like you're more knowledgeable with technical building, so I'd start there. I'd also poke around the Developers Community to see if anyone else has run into this issue and has a solution.

Ideally, the way they built HubSpot, you don't need to hide modules - it's meant to be responsive design. So I think it sounds like something is out of sync, as you mentioned.

Wish I had a more "easy button" answer!

Re: Editing Mobile Version of Landing Pages without CSS

rtonkovich — Fri, 26 Jan 2024 17:58:25 GMT

Is this really an answer to the question above about how to fix the mobile version? I don't see how your response addresses the question. I'm having a similar issue where I designed a page in the desktop drag-and-drop editor, and I'm finding that Hubspot makes some odd choices when transitioning my design to mobile. For example, it's centering text that I do not want centered. How do I fix this?