Here's a possibility.  See screenshot.  I thought the left right padding on the footer looked odd, so I corrected it to the width of the other elements by removing the bootstrap container padding.  I had to add "!Important" to one rule below because someone is already overriding the base css. I don't know how this will affect mobile view. They may have css already in place for that though.

footer .container {
    padding-right: 0;
    padding-left: 0;
}
footer .ow_footer_menu {
    text-align: center !important;
}
footer .datagrid table tbody td {
    width: 25%;
}

Hi there,

It works when logged out but logged in, it is still the same :( any work around Darryl ?

The elements are most likely different once you sing in, and get off the landing page, but all I can see is the landing page.  My guess would be that once in the site it would be the standard Oxwall elements,  but you also have that custom footer as well.

It appears that the custom footer menu that you are using is a third party add on, and isn't responsive. It doesn't lay out correctly on mobile.
Can it be fixed?  Yes. With the right css, and media queries.

Here's something different for you to try. This should improve the mobile view as well.

First remove this
footer .datagrid table tbody td {
    width: 25%;
}
and change this
footer .ow_footer_menu {
    text-align: center !important;
}
to
.ow_footer_menu {
    text-align: center !important;
}

Add this
.datagrid table tr {
    display: flex;
    justify-content: space-between;
}
.datagrid table tbody td {
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 768px) and (min-width: 320px) {
.datagrid table tr {
    display: block;
}
.datagrid table tbody td {
    text-align: center;
}
}

Darryl B,

You're a genius :) thanks a Mill....!!