Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

Footer widgets behaving strangely on tablet

Home Forums Support Footer widgets behaving strangely on tablet

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #207442
    Tully

    Hi Tom,

    Sorry to ask you this question again, but for some reason I have looked back for your reply to my earlier question in my profile sections, and the topic isn’t listed there – I can’t find it.

    My problem is with the footer widgets and the way they behave when being “responsive”. Instead of being evenly divided in rows on smaller screens (either on a tablet, or just resizing the browser window smaller), there is strange spacing. There might be two footer widgets on the first row, one widget on the right in the second row, one widget on the left in the 3rd row, and one widget centred in the last row. Is this a fault in the theme that might be fixed in the future, or is it something I am doing wrong?

    Also I would rather the footer widgets didn’t respond until the screen size was smaller than this, that they all stayed on one line and simply shrank to fit. Is that possible?

    And one final thing, on mobile, is it possible to restrict the widgets to displaying 2 to a line but smaller size, rather than one to a line stacked one on top of another?

    Thanks Tom, love the theme, and your support is fantastic. Is there somewhere I can leave reviews etc.?

    #207443
    Tully
    #207466
    Tom
    Lead Developer
    Lead Developer

    Good find! I’ve fixed this in the next version.

    If you’re interested, this is the fix:

    @media (max-width: 1024px) {
        .inside-footer-widgets > div:nth-child(odd) {
            clear: both;
        }
    }

    To stop the footer widgets from being responsive on tablets, this post should help: https://generatepress.com/forums/topic/footer-widgets-cut-off-for-multiple-rows/#post-135953

    Of course, your code will be a little different as you have 5 widgets:

    add_filter( 'generate_footer_widget_1_tablet_width','generate_change_footer_widget_1_tablet_width' );
    function generate_change_footer_widget_1_tablet_width()
    {
          return '20';
    }
    
    add_filter( 'generate_footer_widget_2_tablet_width','generate_change_footer_widget_2_tablet_width' );
    function generate_change_footer_widget_2_tablet_width()
    {
          return '20';
    }
    
    add_filter( 'generate_footer_widget_3_tablet_width','generate_change_footer_widget_3_tablet_width' );
    function generate_change_footer_widget_3_tablet_width()
    {
          return '20';
    }
    
    add_filter( 'generate_footer_widget_4_tablet_width','generate_change_footer_widget_4_tablet_width' );
    function generate_change_footer_widget_4_tablet_width()
    {
          return '20';
    }
    
    add_filter( 'generate_footer_widget_5_tablet_width','generate_change_footer_widget_5_tablet_width' );
    function generate_change_footer_widget_5_tablet_width()
    {
          return '20';
    }

    Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

    To make the widgets half width on mobile, you would add this CSS:

    @media (max-width: 768px) {
        .inside-footer-widgets > div {
            float: left;
            width: 50%;
        }
        .inside-footer-widgets > div:nth-child(odd) {
            clear: both;
        }
    }

    Glad you’re enjoying the theme! Reviews are incredibly appreciated! You can find the link in my signature below 🙂

    Hope the above helps – let me know if you have any more questions.

    • This reply was modified 4 years, 4 months ago by Tom.
    #211979
    Michele

    Hi, Tom, love this theme!

    Not sure what has changed, but until recently, this css worked to align 3 footer widgets in one row on tablets both portrait and landscape (and stacked on mobile):

    /* makes footer widgets line up properly on TABLET */

    @media
    (max-width: 1024px) and (min-width: 768px) {
    .footer-widget-1.grid-parent.grid-33.tablet-grid-50,
    .footer-widget-2.grid-parent.grid-33.tablet-grid-50,
    .footer-widget-3.grid-parent.grid-33.tablet-grid-50 {
    width: 33%;
    }
    }

    It’s stopped working, so tried all the solutions offered above (the “fix” css and the “function + css”), following all links, but on tablets am still getting 2 widgets on first row and 3rd widget on second row.

    I’m at GP 1.3.34 and GP Premium 1.2.88. So has the “fix” been released and I already have it? (if so, how to implement), or is it in the next release?

    Thanks!

    #211981
    Tom
    Lead Developer
    Lead Developer

    That CSS should work – can you link me to the site where it isn’t working?

    #211984
    Michele

    Wow, that was quick!! It’s in development so I have directory behind a password. Can I send you my custom style sheet and custom functions docs privately? How would I do that? thanks!

    #211988
    Tom
    Lead Developer
    Lead Developer

    Hmm that won’t help much, as it could be tons of different things attributing to it.

    Maybe you can update me when you get it up on a live server?

    #211992
    Michele

    That’s a good point, I forgot about other plugins. But nothing in my installation has changed except a (big) WooCommerce upgrade and wasn’t there a relatively recent GP point release?

    This is almost working:


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

    The widget1 is on left, widget2 is in center, with plenty of space for the widget3 on the right but it is dropping to row 2. Just need to get that 3rd widget up to row 1 on the right!!

    Not sure what other info you would need to look at, so please let me know what I could send to you. Thanks!

    #212123
    Michele

    Hi, Tom, never could figure out how to put the footer widgets back to side-by-side on one row on a tablet, but came up with this work-around to stack them (vs. 2 on first row and 1 on second row) … maybe this would be helpful to others …

    /* stack footer widgets on tablet */

    @media
    (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets .tablet-grid-50 {
    width: 100%;
    }
    }

    Best,
    Michele

    #212124
    Tom
    Lead Developer
    Lead Developer
    #212508
    Michele

    Hi, yes, followed all links and tried all solutions. Thanks, again!

    #212516
    Tom
    Lead Developer
    Lead Developer

    Can you link me to your site when you have the methods in that post implemented?

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