I’m having trouble with a custom Bootstrap-based theme that I implemented on my HubSpot blog. The theme works fine on desktop and most screen sizes, but when I resize the browser window to around 600 pixels wide, something weird happens.
The page becomes completely unresponsive and I lose the ability to scroll. The scrollbar just vanishes and the content gets frozen in place. I can’t scroll up or down at all, which makes the blog unusable on tablets and smaller devices.
This only happens at that specific breakpoint range. Has anyone encountered similar responsive design issues with custom Bootstrap themes on HubSpot? I’m not sure if this is a CSS problem with my media queries or something specific to how HubSpot handles responsive layouts.
Been there. Hit this exact problem last year running multiple custom themes across different HubSpot blogs.
The 600px freeze happens when Bootstrap’s grid clashes with HubSpot’s responsive CSS. Instead of hunting down conflicts manually, I built automation to monitor blog performance across viewports and auto-fix responsive issues.
Set up a workflow that detects broken scrolling at specific breakpoints, then auto-injects the right CSS overrides. It also watches for new conflicts when we push theme updates.
Runs checks every few hours and alerts me if any viewport breaks. Beats manually testing every device size after changes.
You could build something similar - watch your HubSpot blog, catch the 600px scrolling issue, auto-apply the fix. Way better than playing CSS detective.
I faced a similar challenge with a Bootstrap theme on HubSpot. It turned out that some of Bootstrap’s styles conflicted with HubSpot’s own CSS. Specifically, certain Bootstrap classes were affecting the overflow properties of the body and html elements when the viewport was around 600 pixels wide. It’s also important to inspect any position: fixed elements, as they can disrupt scrolling functionality. I resolved the issue by systematically disabling CSS rules to identify the source of the conflict. Additionally, be mindful of how HubSpot’s responsive design features might interfere with your custom styles, particularly near the tablet breakpoint.
check your z-index values & any sticky/fixed positioning near that breakpoint. had the same issue - navbar froze scrolling at tablet sizes. try adding overflow-y: scroll !important to your body tag temporarily & see if that fixes it.