How to make footer behave like FLEXBOX on FLOATS structure?

Hi there,

can you link us to your site so i can take a look at the CSS required.

My site is in COMING SOON MODE because I don't want it to be indexed yet.

I am talking about the .footer-widgets element.
The basic footer widget css. I am sure you can test it in some demo site of yours that uses the FLOATS structure so that you can achieve the desired result that I want as I showed you in the second loom video right?

Just to make sure, you are wanting to have footer widgets:
- 33% in width on desktop
- 50% in width on tablet
- 100% in width on mobile

Is that correct?

Let me know :)

I am not so sure about the 50% on tablet mode but I want them to behave like the second LOOM video I mentioned above (FLEXBOX video)

I don't want the third widget to go UNDER the first two in tablet mode...
You can check the video I mentioned and you will understand Leo.

David and I both checked the video but sounds like neither of us really understood what you wanted.

Any chance you can create a staging site for us to take a look?

Then you can remove it later so it won't get indexed.

Thank you.

I can't create a staging environment. Guys... It's really simple. My footer has 3 widgets. As you can see in the FIRST loom video when the screen gets smaller, the third widget (which is the newsletter) goes under the first two widgets.

I don't want that! I simply want all 3 widgets to be next to each other until it reaches the mobile breakpoint. (AS SHOWN IN THE SECOND LOOM VIDEO which has the FLEXBOX structure).

Understand now? I simply don't like the fact that the 3d widget (newsletter) goes UNDER the first two widgets when the screen gets smaller. I want all 3 widgets to be next to each other as shown in the second LOOM video.

I explained it as best I could. I hope that you understand now.

Try this CSS:

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

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

I tried your css but the result is the following
https://www.loom.com/share/e08e19266dfa4922b7f93ba3330d82b8

It doesn't behave like the second LOOM video I showed you at the start.

I want it to behave like that. https://www.loom.com/share/95665933d09d4c8fbd185e2129033a52

I edited the CSS here:
https://generatepress.com/forums/topic/how-to-make-footer-behave-like-flexbox-on-floats-structure/#post-1591431

It works like a charm! :D Thanks Leo I appreciate it!

No problem :)