Responsive Break Points in Footer Widgets

[Jessica]

I’m having a lot of trouble with the responsive breakpoints (specifically in the footer). The queries make the widgets snap WAY too soon and creates an odd extreme float left for al 4 leaving a HUGE gap on the right. I created a style to override and kind of fix it by centering them, but will undo it so you can see for now. The site is:

Here’s the bypass link to view the site (I have a coming soon plugin enabled so this link will expire in 2 days from the date of this post): http://hinsdale.jro-dev.com?bypass=0201618hins

I’m not looking to just center them b/c it creates just as much empty space that way. I’d like for them to stay as AT LEAST 2×2 until it gets to around 600px+/- wide Right now, at the width of 1023 it already snaps and my existing side container is only 1000px wide so that’s way too soon.

Thanks for looking and any suggestions you have to tweak/fix this. 🙂

GeneratePress 2.0.2

GP Premium 1.5.6

[Tom]

Hey Jessica,

Give this a shot:

@media (min-width: 800px) {
    .inside-footer-widgets > div.grid-25 {
        width: 25%;
        clear: none;
    }
}

@media (max-width: 768px) {
    .inside-footer-widgets > div.grid-25 {
        width: 50%;
        float: left;
        clear: none;
    }

    .inside-footer-widgets>div:nth-child(odd) {
        clear: both;
    }
}

@media (max-width: 600px) {
    .inside-footer-widgets > div.grid-25 {
        width: 100%;
        float: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jessica]

Thanks Tom. That seems to work but I had a few extra things to space it out right. You can veiw it here (and you’ll see I’m using the WP show Posts pro on the homepage as well). Just had to adjust the padding and margins throughout so it was how they wanted it.

I pushed this one to the max, for sure (CPTs, ACF, page templates and custom scripts to create cross functional populating). Would love to hear what you think even though it’s not 100% done yet.

Hinsdale Dev Site-JRO

[Tom]

Looking great so far! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jessica]

Thanks 😉

Just working out a few kinks with custom functions and scripts in some of the sections.

But you can probably tell I pushed site to the limits! )

[Author]

Posts