[Resolved] footer widget custom breakpoint

[dasigna]

*sigh*

so one thing as a customer demand and cant get it solved sufficiently…

i have three widgets within footer widget area (inside footer widgets) and almost everything is well with that, exept for the fact that they break into two column size at tablet landscape view at 1024px. the complaints about that are first, ‘normally’ there is a logo in the middle and it looks weird when widgets breaking in two columns, second is there would be enough space to show all three down to 1024px.
“simply looks no good” :-/

so what i want to do now is, fix the breakpoint only for footer widgets and this case or reduce the space the widgets taking up… already found some selectors and tried to solve, but cant get that damn thing to work :-).
i’m not getting over that ‘tablet-grid-50’-thing to reduce the width of the widgets to 33% or change the breakpoint to one px less for only that case …

(as your code for that is quite complicate for me it would be even more complicated to put one extra pixel into the ipad…)

so any help highly appreciated! thanks in advance.

[Tom]

Hi there,

This topic might help: https://generatepress.com/forums/topic/footer-widgets-cut-off-for-multiple-rows/#post-135953

Let me know 🙂

[dasigna]

hmmm… tried your functions call, but the result is kind of ‘funny’ 🙂

on normal desktop view the css part causes the third widget not to be centered any more cause it wont take up 33% (??) but lower… without the css part takes 33% again and centers as intended.

tablet landscape @1024px same behaviour regarding the third widget – but here breaking into a second row anyway!! with css aligns left most beneath the two other (who behave as intended) , without centers (in second row)

the classes seem to apply correctly to the widgets according to xtra functions (as far as i can see) but the third widget wont stick to the same row and breaks into second one … (and changes width with your css)

think i still have to take a closer look if something might interfere

…

[dasigna]

EDIT:

… if i change the css-part to this it works:

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

.inside-footer-widgets > div:nth-child(2n+1) {
    clear: none;
}

… for landscape view on tablet! but in portrait the third widget does not center …

*grrrr* 🙂

[dasigna]

o.k. …

so this part seems to be important, because it prevents the third widget to break:

.inside-footer-widgets > div:nth-child(2n+1) {
    clear: none;
}

but with the css you given,the content of the third widget does not center as intended:

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

it does so when widgets are stacked in tablet and mobile portrait, but not on desktop or tablet landscape…
cant fix that so far!

any suggestions? (running out of ideas)

[Tom]

Try replacing this:

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

With this:

@media (min-width: 769px) {
    .active-footer-widgets-3 .footer-widget-3 {
        width: 33.33%;
    }
}

[dasigna]

arrrgh – just wonder why not figured out by myself… overlooking quite obvious things! 🙂

so thanks – works now!

btw:
thanks sometimes aint enough. you helped with a lot of things these days, so as soon as the client has paid his bill i will push over an extra coffee or two. promised!!

[Tom]

Thank you! Coffees are always appreciated 🙂

[Author]

Posts