Excessive Top Margin on mobile responsive breakpoint

Hi,
Love this plugin, using it in a Genesis / Dynamik Combo.
Currently I have an issue with Excessive Top Margin at mobile responsive break-point.
I have a heading at the top of my page which looks fine in desktop view.
Once browser width shrinks to make the content columns stack on top of each other, my one column at the top of the page with my page header text in it gets around a 50px top margin / padding.
I have tried unsuccessfully to address this via css.
I can share web site link via private reply.
Thanks,

Hey Chris,

Sure, feel free to send along the link and I’ll take a look!

Best,
Billy

[Content Hidden]

Hey Chris,

That is interesting. Would you mind sending across temp admin access so I can take a deeper look?

Best,
Billy

[Content Hidden]

Hey Chris,

I’ve got lots of experience with Dynamik so thought I’d also try to help you on this.

Having taken a quick look, I suspect your problem is being caused by settings / custom css in Dynamik rather than Beaver Builder. I’m currently on my iPad so have limitations to what I can do and see, but I think there’s something going on in the Responsive Section of Dynamik (check the break points for mobile) or the Custom CSS section.

Sorry I’m not able to give you a definite answer at this time. I’ll take another look in the morning when I’m on my computer to see if I can pinpoint the issue.

Cheers,

Colin

Hi Colin,

Thanks for taking the time.

I am enjoying the Dynamik and BB combo and it was your comments that steered me in this direction.

I really appreciate the time that you put in to helping the WordPress developer community.

I have studied my css and can not find the answer so will be interested to find the solution.

Chris

Hi Chris,

Thanks for you kind words. I’m glad you’re enjoying the Dynamik / Beaver Builder combo. It really is the best WordPress stack out there, in my opinion.

I’ve just taken another look at your site and finally found the problem.

It seems the negative margin value you put in your page headings was conflicting with something else at the mobile breakpoints. In the time I had, I couldn’t quite put my finger on exactly what was causing the conflict, but setting the top margin to zero pixels on all page titles has fixed the problem with the extra margin appearing in the mobile views.

See pic: http://screencast.com/t/M95V3O6aNQt

If I was you, I would try to avoid using negative margins wherever possible. They come in handy sometimes for creative overlaps of page elements, but really should be avoided otherwise you end up getting weird things happening like you’ve just experienced.

Good luck with the rest of your site.

Cheers,

Colin

Thanks Col,

Very well done, thank you.

I would not have thought that would happen.

Thanks again, much appreciated.

Chris

Great to hear you guys figured it out, thanks Colin! I was a bit crunched for time yesterday, but my first thought when looking briefly was that negative margin in some capacity. Great catch!

Best,
Billy

Incredible support from you guys.

Thanks a lot.

Chris

You’re very welcome Chris.

Glad to be able to help.

Colin