Archived topic
4 Footer Widget Areas in - 2 columns & 2 Rows
8 replies · Started by Stephen on March 5, 2022
Hi, hope you can help me with this:
Currently i have 4 widget areas in my FOOTER which are arranged 4 columns x 1 row and change to 1 columns x 4 rows for mobile phone screen size.
I would like an intermediate arrangement of FOOTER widget areas for tablet screen size with the 4 widget areas arranged in 2 columns x 2 rows.
– Can you help me with some CSS to arrange my 4 FOOTER widget areas in 2 columns x 2 rows for tablet screen size?
Thank you
Stephen
Hi there,
Any chance you can link us to the page in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
hi sure, this is my test site
hi sure, this is my test site
Hi Stephen,
Try this CSS:
@media (min-width: 769px) and (max-width:1024px) {
.site-footer .inside-footer-widgets > div {
flex-basis: 50%;
}
.site-footer .inside-footer-widgets {
flex-wrap: wrap;
}
.footer-widget-3 {
order: 2;
}
.footer-widget-2 {
order: 3;
}
}Thats perfect,
I just skipped the changing order part and added a bit to align left or centre depending on screen size.
So now when the widgets are in 2x2 layout for tablet screen size there is no vertical padding between the 2 widget rows. The padding is fine for mobile phone and desktop.
- How can I add padding between the 2 widget rows just for tablet screen size please?
Thanks
Stephen
You can add this into the same media query:
.site-footer .inside-footer-widgets > div {
margin-top: 20px;
margin-bottom: 20px;
}Brilliant thanks.
Its getting almost ready
You are welcome :)
