Tagged: CSS, footer, responsive, widgets
I am trying to figure out the cleanest and most long-term solution to making the footer scale down when viewed on a mobile device. Unlike other elements that auto-switch from multiple columns to single, I cannot seem to find an easy way to achieve this for the footer widgets. Obviously, I am missing something, because I swear it used to do this, but not sure how I did it.
Any help would be greatly appreciated!
-jason
Update: I think I figured it out. In the documentation, there is a css snippet for making the footer full width, but it does not really do much, unless it is a single-column footer, which most footers are not. So, I added div in the selector and it now performs as desired. Feel free to adjust the documentation to help others that might be facing similar issues with mobile footer display.
/* Full width footer columns */
@media only screen and (max-width: 767px) {
#footer .container div {
width: 100vw;
max-width: 100%!important;
} }