Remove heading margin on form

Marketing & Content Tips, Tricks & Best Practices
1

Hello,

On mobile my form is too big and doesn’t fit in the viewport, one issue is that the margin is too large between the rich text and heading of the form, can I remove it? I attached a picture so you know what I’m talking about.
I tried adding this styling to my page, but it doesn’t work:

.hsfc-Heading {
margin:0;
}

TheAki_0-1743177763696.png
TheAki_0-1743177763696.png583×1052 51.8 KB

2

Hi @TheAki!
There can be reasons why the stying you added didn’t work, I’ll share some below:

  • Wrong selector:
    .hsfc-Heading might not be the correct class for the heading in your form. HubSpot forms often use different class names, depending on how the form is embedded or styled via the drag-and-drop editor or custom modules.

  • Specificity or override issues:
    Even if .hsfc-Heading is the right class, HubSpot’s built-in CSS or inline styles may be overriding yours. You may need to increase specificity or use !important carefully.

  • CSS not loading properly:
    Make sure the CSS is being added to the correct place — either inside the page settings (Design > Edit Head > Add CSS), inside a <style> tag, or via the attached stylesheet.

    Here’s what you can try instead:

    1. Inspect the actual class of the element using Chrome DevTools or your browser’s inspector.
    2. Try a more specific selector. For example: .hs-form .hs-richtext {
      margin-bottom: 10px !important;
      }
      Or, if you find the correct heading class:
      .hs-form .form-title {
      margin: 0 !important;
      }
      3. Use media queries to make it mobile-specific:
      @media screen and (max-width: 480px) {
      .hs-form .form-title {
      margin-bottom: 10px !important;
      }
      }
      Let me know if you need further help! Here’s my calendar for a free consultation.
3

That’s what I did, found out it’s a class called hsfc-Heading, but the selector doesn’t do anything (I added !important), I checked in the code and the styling is in there. Could it be that I can’t style the embedded form?

TheAki_0-1743204684920.png
TheAki_0-1743204684920.png1557×223 41.5 KB

4

Hi @TheAki ,

The issue you’re facing is outside the form itself, likely due to external styling affecting the spacing. You may need to adjust the parent container or use more specific CSS rules.

If this still doesn’t work, could you share the link to the page where the form is embedded? That way, I can inspect the styles applied and provide a more accurate solution.

5

Here is the page: Automatizujte Svoj Call Centar Uz Naš AI Voicebot