Hi Guys,
I’m having quite a high bounce rate and my website and it’s due to the mobile version (app. 60% traffic is mobile). Google test says it’s not mobile-friendly and shows the mobile landscape view instead of portrait view with issues like: “content wider than screen”.
Any ideas on how to fix this?
Best,
Magda
@Magda_Sowierszenko it looks like there is some overflowing content here:
Do you have a published version you can post somewhere?
@Magda_Sowierszenko I believe if you fix your footer the issue should be solved:
Here you can see horizontal scrolling occuring:
But if I delete the entire footer, no horizontal scrolling occurs:
You should removed the static width on this div (600px), that width is totally unnecessary, even on desktop:
If you just set the parent (footer-content) to display flex with wrap and then each child set a flex-basis of 100%, you won’t need any fixed widths on the children and it should flow from desktop to mobile relatively well, you may need to adjust the alignment on different breakpoints, but this is what it should look like:
Desktop:
It looks like you have some negative margins and some other stuff set that is throwing off the centering, you really shouldn’t need any of that with flexbox.
Let me know if this is helpful, I think you have over complicated it a bit though!
