I like how the footer looks on the desktop, but as the screen dimensions decrease, it squashes together. Therefore, it’s not legible or useable for that matter. How do I get each columns to sit underneath each other almost like a vertical as opposed to a horizontal footer for table and mobile devices?
My site is: https://businessstudiesteacher.org.uk
Thanks in advance.
Hi,
You can create another bar with the same content but with flex layout set to Column.
Then set your first bar to be visible only in desktop and you second bar to be visible only in mobile.
That way, you will have columns that are stacking up in mobile.
Hope that helps.
@paul.r thank you. I incurred a problem doing this: rather than the columns underneath each other they overlapped. What’s causing this because I had followed your steps?
Hello Nick,
You re doing the footer for the desktop correctly. Since the columns will not stack below each other for the smaller screens, the columns will divide and display among themselves. Because of the lack of space, they are crowded next to each other. To resolve this, you will have to create another bar or duplicate the first bar and display each of the containers as rows so that this time the containers will stacked below each other. You can show/hide the first and second bar to display in the desktop and small screens by utilizing the “Hide During Breakpoints” option as shown in @Paul_r’s screenshot.
Hope this make sense.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.