0

I'm working on a hubspot project that I got pulled into last minute and am having a lot of trouble with a particular issue. The page looks okay fullscreen but on mobile, I'm getting some crazy margin that is making the site look super funky. I've searched and searched through the elements with google dev tools and can't find any culprit. I was hoping someone either knows a common problem with this on hubspot or would easily be able to help me pinpoint which element is causing the problem.

A link to the site is https://www.modev.com/amazon-dev-day-casual-connect-sf

Any help would be greatly appreciated. I'm driving myself crazy at this point.

Thanks, Jon

Jleibham
  • 480
  • 2
  • 9
  • 26

1 Answers1

1

I don't know Hubspot's templates so it's hard to say for sure. But tooling around with your site I tried to force the width of the HTML using jQuery

var screenWidth = $(window).width();
$('html').css('width', screenWidth);

It worked enough to show me that when scrolling down the mobile site something's off with the header that's hidden and shows on scroll. Either the class below or it's parent might be a good place to look.

cbp-af-header cbp-af-header-shrink
iMarketingGuy
  • 636
  • 4
  • 10
  • Thank you for your helping me out! I was able to pinpoint the problem after and you are correct it was something within the header. In the end, we ended up scrapping the header animation so I just rebuilt the header from scratch and it seemed to solve all the issues :) – Jleibham Jun 11 '16 at 01:36
  • Good deal! I'm glad I could be of some help. Maybe it's just me, but using Chrome and inspecting mobile version, landscape looks great, but portrait doesn't seem to respond correctly. Or is that the way it's supposed to be? – iMarketingGuy Jun 11 '16 at 01:58