Hello. My form on Rådgivning om ladeinfrastruktur | Elento is not looking good on mobile view. I have tried looking for the CSS modules, but I cannot find a solution. Does anyone know what to do? Thanks in advance
Hey @elento,
look into the mobile section or column settings.
To enable the specific mobile settings, simply switch to mobile view (below the page name in the editor), than open the “Contents” tab (second icon) in the left navigation, select the column the module is in and open the Alignment and spacing dropdown.
You should see some padding options. Set them to your needs.
Do the same for the section if the column settings shouldn’t be enough.
Note:
These changes are per page/column/section. So don’t go to crazy on them as this might cause some problems at some point in the future.
Best,
Anton
Hi @elento,
Anton’s suggestion about column/section mobile settings is a good starting point, but if the padding adjustments alone aren’t fixing it, the issue is often that the form module itself has fixed widths or margins baked into its default styles, which HubSpot’s built-in mobile editor doesn’t always override cleanly.
A few things worth checking:
- Inspect the form on mobile using browser dev tools (F12 → toggle device toolbar) to see which specific CSS rule is causing the overflow , usually it’s a fixed
widthormin-widthon the form container or input fields. - If you’re using a custom module or hardcoded HTML for the form wrapper, add
max-width: 100%andbox-sizing: border-boxto the form container , this alone fixes it in most cases. - If the form is embedded (not a native HubSpot module), the embed script sometimes injects its own styles that conflict with your theme , you may need
!importantoverrides in your mobile stylesheet as a last resort.
If the form still won’t behave after that, it’s usually faster to have a developer rebuild the responsive breakpoints from scratch rather than patching endlessly , happy to share more specifics if you can post a screenshot of the mobile view.
Best,
The Next Devs Team