[Support request] Responsive Break Points in Footer Widgets

Home Forums Support [Support request] Responsive Break Points in Footer Widgets

Home Forums Support Responsive Break Points in Footer Widgets

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #498050
    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. πŸ™‚

    #498395
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #501291
    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

    #501623
    Tom
    Lead Developer
    Lead Developer

    Looking great so far! πŸ™‚

    #501874
    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! )

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.