[Resolved] Footer icon hassles

[Hazel]

Hi Guys
Some time ago I raised an issue about footer widgets breaking into a single column before I wanted them to. You gave me this code which seemed to work very well until viewing the site with my Galaxy S2 tablet in portrait orientation and the widgets broke into one column.

@media (max-width: 1024px) and (min-width: 768px) {
    .footer-widgets .tablet-grid-50 {
        width: 33% !important;
    }
    .footer-widgets .inside-footer-widgets>div:nth-child(odd) {
        clear: none;
    }
}

I wondered if there was any way of improving things. A way of telling the widgets to display in one row if if there is room on the screen would be first prize.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

you can try adding this CSS:

@media (min-width: 450px) {
    .inside-footer-widgets {
        display: flex;
        flex-wrap: wrap;
        padding-right: 40px
    }

    .inside-footer-widgets>div {
        flex: 1 0 200px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hazel]

Hi David
That worked perfectly, thank you.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts