- This topic has 12 replies, 3 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
Hello there.
I use the FLOAT structure and my footer behaves like this when the screen goes smaller.
https://www.loom.com/share/48d262364abc4b08940f4738165ac45d
As you can see as the screen gets smaller the third widget goes under…———————————————————————-
I want my footer to behave like FLEXBOX.
https://www.loom.com/share/95665933d09d4c8fbd185e2129033a52
As you can see the third widget stays on the same column until it changes for mobile.That’s what I want! But I want to achieve this in FLOATS structure because I have some other problems when I change to FLEXBOX.
I am sure this is possible with some code. Can you please help? I would really appreciate it!
Customer Support
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?Customer Support
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 mobileIs 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/e08e19266dfa4922b7f93ba3330d82b8It 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
It works like a charm! 😀 Thanks Leo I appreciate it!
No problem 🙂
- You must be logged in to reply to this topic.
