HubSpot Form fields not going line by line on mobile

Marketing & Content Hub Lead Capture Tools
1

Hello,

The forms of my landing pages are not being responsive on mobile. instead of having one field per line I get two per line making it unusable on mobile. Weirdly it displays fine in preview.

Screenshot 2026-09-24 172313
Screenshot 2026-09-24 172313519×776 21.4 KB

Screenshot 2026-09-24 172151
Screenshot 2026-09-24 172151383×781 27.3 KB

3

Hey @Prosp :waving_hand: Welcome to the HubSpot Community!

Thanks for sharing the screenshots and for asking!

From what I can see, it looks like it would be the CSS from the landing-page template/theme overriding the form layout. HubSpot’s preview may not fully reproduce the published page’s template CSS.

Could you please share the link to the page where the form displays as well as the theme you are using?

Here are some resources for reference:

Could you please try the following:

  1. In the landing-page editor, select the form module and check its layout, spacing, and any custom CSS/classes.
  2. Check whether the form is inside a two-column row or narrow column. Could you move it temporarily into a full-width column to see whether the fields stack correctly.

Also, I’d love to hear from our Top Expert: Hi @Anton, @evaldas and @nickdeckerdevs1 do you have suggestions, please?

Have a fantastic weekend and thanks so much!

Bérangère

4

Hi @Prosp , could you please share which theme you’re using and a link to the live landing page? Since the form looks fine in preview, there may be a difference in the styles loading on the live page. Seeing the published page would help confirm what’s keeping the fields side by side on mobile.

5

Hi Berangere,

Thank you for you reply, really appreciate it. Here is a link to one of the landing pages: Contesting A Will

I am just using the blank template blank.hubl.html on the Elevate theme. Domain and page stylesheets aren’t activated either.

Thanks :slight_smile:

6

Hi @Prosp , the form currently switches to one field per row only at screen widths of 430px or below. This could explain why it looks fine in the mobile preview but still shows two columns on your phone. Please add ths CSS to your landing page’s Head HTML, publish the changes, and check again. It extends the single-column layout to widths below 768px.

@media (max-width: 767px) { \[data-hsfc-id="Renderer"\] .hsfc-Row { display: flex; flex-direction: column; gap: var(--hsf-row__vertical-spacing, var(--hsf-default-row__vertical-spacing)); } }

Let me know if this works

7

Hi @Prosp,

Looks like you are using the Elevate theme, which is quite a bit harder to work with than the standard HubSpot themes.

If you don’t want to mess with code, then the easiest solution would be to update the form itself to not have a two column layout, then possibly reduce the width of the form on the page for the desktop version if you don’t like the look.

Otherwise, as @HusainRizvi suggested, you will need to add some custom CSS for the media query to start around 767px, as currently the one column layout becomes active only on VERY small screens.

8

Hi!

Moving the fields to an individual line worked so thanks for that! Will keep a noe of the CSS code for the future if we need to move multiple form fields per line so thank you so much for the help!
I will also start having a look at some new themes that would work well for professional servviers and play arund with this :slight_smile:
Thanks!