jquery: Optimize footer display on mobile devices

[HermitShamiko]

When the screen size is larger than 480px, follow the display style of the PC and place the books in a single line.
befofe:

after:

[mgol]

Thanks for the PR. I don't think it's the best solution, though. What flex mostly does here is making float: left ineffective, more so than any real flex algorithm.

footer .books li has override styles for max-width: 700px. I checked and 3 books don't fit on the smallest phone screens (like first iPhone SE: 320 px wide) but they do for slightly larger screens.

In the interest of maintainability, I'd rather rework the whole footer .books & .footer .books li styles to remove floats and introduce flexbox with CSS gap, and then on the smallest breakpoints - max-width: 480 px - make it stretch instead.

Let me know if you'd like to work on it.

[HermitShamiko]

Thanks for the PR. I don't think it's the best solution, though. What flex mostly does here is making float: left ineffective, more so than any real flex algorithm.

footer .books li has override styles for max-width: 700px. I checked and 3 books don't fit on the smallest phone screens (like first iPhone SE: 320 px wide) but they do for slightly larger screens.

In the interest of maintainability, I'd rather rework the whole footer .books & .footer .books li styles to remove floats and introduce flexbox with CSS gap, and then on the smallest breakpoints - max-width: 480 px - make it stretch instead.

Let me know if you'd like to work on it.
I have tried rewriting the footer.books layout.
The default (700px is the same)：

Below 480, it is not limited to one line：

Looking forward to your further guidance！