Footer widgets behaving strangely on tablet

[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.?

[Tully]

PS Website is http://www.bendigodogtraining.com.au

[Tom]

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 7 years, 9 months ago by Tom.

[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!

[Tom]

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

[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!

[Tom]

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?

[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!

[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

[Tom]

Thanks for that!

Out of curiosity, did you try this?: https://generatepress.com/forums/topic/footer-widgets-cut-off-for-multiple-rows/#post-135953

[Michele]

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

[Tom]

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

[Author]

Posts