Footer Widgets Cut Off for Multiple Rows

[Michel Greenwood]

Hi,

Golly, you guys are really working hard with the support. I think this might be a newbie question…

It seems the footer widgets begin a second row at 1024px width (at least that’s how it’s working for me). I am using three widgets, and they will shrink down up to 1025px and stay on the same line. But they break into two rows at 1024px. This isn’t the best deal since the ipad is 1024px wide. I was trying to find where to adjust that by looking through the media queries, but couldn’t find where. Is there a simple answer for this?

Thanks.

[bdbrown]

Hi Michel. Take a look at this post. There is some CSS there that might help. Let me know if you have any questions.

[Tom]

You can also use a function like this to change the widths of the footer 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 '33';
}

add_filter( 'generate_footer_widget_2_tablet_width','generate_change_footer_widget_2_tablet_width' );
function generate_change_footer_widget_2_tablet_width()
{
      return '33';
}

add_filter( 'generate_footer_widget_3_tablet_width','generate_change_footer_widget_3_tablet_width' );
function generate_change_footer_widget_3_tablet_width()
{
      return '33';
}

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

Then add this CSS:

.active-footer-widgets-3 .footer-widget-3 {
      width: inherit;
}

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

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

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

[Michel]

Great! Thank you so much for the help.

[Tom]

Glad we could help 🙂

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

[Miguel]

Hi Tom!

I have 3 footer widgets. They look great on 15 inch laptop screen. But upon looking at them on an Ipad, they break into 2 columns and this isn’t ideal.

How can I go about fixing this?

http://aprendendoinglesemcasa.com/

Many thanks!

Miguel

[Tom]

The post above should tweak that for you: https://generatepress.com/forums/topic/footer-widgets-cut-off-for-multiple-rows/#post-135953

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

[Norman]

Hi guys,

Should this still be working? I tried to use it, but it didn’t work.

http://www.fairfieldcollege.nl/nieuwesite

I would like the 3 widgets to be on one row in the horizontal tablet mode.

[Leo]

Hmm it should still work.

Just want to make sure you add the first block of code (filters) using one of these methods? https://docs.generatepress.com/article/adding-php/#code-snippets
And make sure you click Save and Activate for the snippet.

And then second part is CSS: https://generatepress.com/knowledgebase/adding-css/

Let us know.

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

[Susanne Friedrich]

Hi guys,
May I add on to this with my issue which is the same:
I also have 3 footer widgets and they stack way too early.
I added the filter function Tom provided above as well as the css in my child theme, and no change.
so it is supposed to show 3 widgets in a row between 1025 px and 768 and stack at 768 pixels but it already stacks a 980 pixels.

I know the widgets would fit 3 in a row, because the widgets above on that page fit and stack later.
see the issue here
http://sfswedenborgian.org/
Thanks for any input

BTW: I just re-purchased the premium because I use it so much and thought you guys deserve the extra cash.

[Tom]

Thank you so much, Susanne!

Can you show me the function you’re using? Your footer widgets are missing some classes.

Let me know 🙂

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

[Susanne Friedrich]

Aha, ok. Heres the function I am using:

add_filter( 'generate_footer_widget_1_tablet_width','generate_change_footer_widget_1_tablet_width' );
function generate_change_footer_widget_1_tablet_width()
{
      return '33';
}

add_filter( 'generate_footer_widget_2_tablet_width','generate_change_footer_widget_2_tablet_width' );
function generate_change_footer_widget_2_tablet_width()
{
      return '33';
}

add_filter( 'generate_footer_widget_3_tablet_width','generate_change_footer_widget_3_tablet_width' );
function generate_change_footer_widget_3_tablet_width()
{
      return '33';
}

[Tom]

Hmm, that should work fine.

Any other custom functions? Custom template files?

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

[Susanne Friedrich]

there is a custom footer file …. ok I removed that file and now it works. well of course!
I do think it would be nice though to automatically have the copyright of the relevant author and not need to use the premium plugin to make it so.
I modified the footer file to also show my byline. But I think I must have removed some classes too.

In any case, thanks for your prompt assistance!
All is well now.

[Tom]

No problem!

What exactly did you edit in the footer file? The copyright output?

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

[Author]

Posts