Archived topic
Issues with footer layout in tablet mode
6 replies · Started by Tim on May 3, 2021
Hi,
I have a 5-widget footer setup and it looks perfect on desktop and mobile.
On tablet (over 769px) however, the width of the columns are reduced and creates awkward looking content in columns 3, 4 and 5 because the footer doesn't switch to vertical.
Site URL attached. Any idea how I can make it look good on tablet also? Would be great if I could make it so the footer columns are vertical instead of horizontal. Like it is on mobile.
bump
Hi Tim,
I'm sorry for the late reply, seems this topic slipped away from our system, my apologies!
You could try this CSS:
@media (max-width: 1024px) {
.inside-footer-widgets {
flex-direction: column;
}
}Thank you Ying, it worked, but there's no space between the columns (headings) now. Screenshot.
Hi there,
change the CSS that Ying provided to this:
@media (max-width: 1024px) {
.inside-footer-widgets {
flex-direction: column;
}
.inside-footer-widgets > div:not(:last-child) {
margin-bottom: 40px;
}
}Thank you :)
Glad we could be of help
