Greetings! As a complete newbie to Webflow, this forum has been extremely helpful for many things, and I send my thanks for that. However, I have now run into something else where I am completely stuck.
Our design began with using a free template that was available. The footer has been altered to add another column of links (plus our logo and specific information).
We really like the look of this footer in all breakpoints if viewed in Firefox or any of its forks (e.g. Waterfox). However, when viewed in any Chromium-based browser on Windows, Android, or Linux – whether Google Chrome, Microsoft Edge, Naver Whale, or the Samsung browser in Android – it begins to overlap and become illegible at approximately 767 pixels in width and below.
To show what I’m seeing, here are two screenshots put side-by-side showing the footer in Windows 10 at 320 pixels wide in the Mobile portrait breakpoint. Firefox is on the left, a Chromium/Chrome browser is on the right.
I have tried my best to find a solution here and elsewhere. I found several varying suggestions. Unfortunately, all of them were either already implemented or did not work.
If somebody can spot what I have surely missed so I can fix this issue, I would greatly appreciate it. Unless this is something that cannot be solved for Chromium-based browsers, we would certainly like to keep this general format rather than ditching that “Footer Logo Block” and replacing it with something much less attractive below the four menus.
Then change the same Footer Grid grid column to 2 from landscape mobile breakpoint onwards. It should look good on designer preview on all breakpoints.
@jiyong I thank you very much for taking the time to respond. However, those steps did not work.
I double-checked that the footer grid remained at the 100% setting you suggested at the desktop breakpoint. The grid column was already set to 2 from the mobile breakpoint onward. There was no perceptible change in the overlap as shown in my original screenshot above.
Hey @KoHoSo , it seems like the changes are not being made to the Footer Grid class as mentioned as it is still left as width: auto (see screenshots below). Add width: 100% to your Footer Grid class to your desktop (preferably so it cascades down) or landscape mobile breakpoint.
I have again put the Footer Grid width at 100%, and this time left the setting in so you and others can see it is engaged. Unfortunately, it is still the same result. Any browser based on Chromium displays the footer in the same mess that I originally showed in my original post.
I’m seeing the overlap, even in the Designer view. Not sure why the branding cell is collapsing, but I’m able to pull the cell down using the corner handle.
I can’t test this without publishing but worth a try.
An alternative is to change the grid to flexbox with wrap and then control the contents from there. Possible those browsers have issues with css grid elements.
