Well after some mucking about in css i found this solution:
.site-footer {
height: 1px;
}
anything below 504px in desktop and 1014px in mobile has the same result of removing the bottom margin thing. Every pixel above those values adds 1 pixel to the bottom margin thing. So for example “height: 1314px” gives a 300 high bottom margin in mobile and 810 high in desktop. Maybe this can give you a hint on to what is causing it?
Either way my immediate styling problem is solved for now.
Thanks.