Footer in mobile to be smaller font

[tatyana_kozh]

For the mobile version I would like the footer to appear in much much smaller font so that it still fits into 1 row on mobile.

How can I achieve this?

[jade]

Hi there,

This is not a recommended way of setting up the footer because it breaks the site mobile responsiveness. The three columns that display adjacent to each other on desktop would display stacked to each other on mobile.

But if you still want to do it, you can add this code to set the columns to three even in mobile and setting their font size quite small:

@media (max-width: 767px) {
    footer.x-colophon.top * {
        color: #000;
        font-size: 12px;
    }

    footer.x-colophon.top .x-column.x-1-3 {
        width: 29%;
        float: left;
        margin-right: 4%;
    }

    footer.x-colophon.top .x-column.x-1-3.last, 
    footer.x-colophon.top .x-column.x-1-3:last-of-type {
        margin-right: 0;
    }
}

Hope this helps.

[tatyana_kozh]

Thank you for the fix.

I need some further help here please.

1. How to make sure that the content stays in one line, rather than Get in Touch details jumping up?
2. The social icons need to have smaller spacing to fit into one line when on small screen - how can this be done?

Please see attached screenshot.

Thank you!

[jade]

Hi there,

Please update the code to:

@media (max-width: 767px) {
    footer.x-colophon.top * {
        color: #000;
        font-size: 12px;
    }

    footer.x-colophon.top .x-column.x-1-3 {
        width: 29%;
        float: left;
        margin-right: 4%;
    }

    footer.x-colophon.top .x-column.x-1-3.last, 
    footer.x-colophon.top .x-column.x-1-3:last-of-type {
        margin-right: 0;
    }

    .x-colophon.top .x-column .widget:first-child {
        margin-top: 0;
    }
}

Hope this helps.