I’m having trouble getting my HubSpot forms to display at full width instead of the default narrow layout. The forms keep showing up really small and I want them to stretch across the whole container.
I’ve tried adding CSS code in multiple places but nothing seems to work. I put it in the OceanWP theme stylesheet, tried it in Elementor’s custom CSS section, and even added it to different parts of the page. The form still looks cramped.
try targeting the actual hubspot container like .hbspt-form or .hs-form. also, ensure ur css loads after hubspot’s default styles to avoid overridin. elementor can often have specificity issues with extern forms, so keep that in mind.
Check your browser inspector to see which CSS selectors are hitting your HubSpot form. I had the same problem - HubSpot loads dynamic styles with higher specificity than your custom CSS. The form wrapper you’re targeting might not even be the right class. HubSpot generates different container classes depending on how you embed the form. Don’t guess at selectors. Right-click the form element and inspect it to find the actual class names. Try boosting your CSS specificity by adding your theme’s body class first, like .oceanwp-theme .your-form-selector. Also check if it’s a caching issue - clear your site cache and browser cache after making changes.
Skip the CSS wrestling entirely. I’ve hit this same wall on multiple client projects - manual fixes always break when HubSpot updates their form structure.
Automation’s the real fix here. Set up a workflow that auto-adjusts form styling when the page loads. You won’t fight HubSpot’s CSS hierarchy or deal with caching headaches.
I run an automated script that finds HubSpot forms on page load and applies width styling dynamically. Works with iframe embeds and JavaScript versions. The automation handles container targeting and specificity issues automatically.
You don’t need complex code for this. The automation watches for form elements, grabs the right selectors, and applies your styling rules instantly. No more guessing class names or fighting theme conflicts.
This scales perfectly across multiple forms and pages. Set it once, done.
Had this exact problem last month with a client site. HubSpot forms have their own container structure that overrides your CSS. Don’t just target the inputs - go after the form container itself. Try this:
Check if you’re using HubSpot’s embed code or iframe version. The iframe version is a pain because it loads external CSS that takes priority. Switch to the JavaScript embed method if you can - gives you way more styling control. You might need to add the CSS directly in HubSpot’s form editor (Style tab) instead of your WordPress theme.