jquery: Optimize footer display on mobile devices by HermitShamiko · Pull Request #486 · jquery/jquery-wp-content

HermitShamiko · 2026-01-18T06:23:05Z

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:

Optimize footer display on mobile devices

Fixed a bug that caused overflow when the width was too small.

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.

Rewrite the footer.books layout

HermitShamiko · 2026-01-22T03:44:25Z

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！

mgol

Thanks for the updates. This is really close to what I'd like to see, just some tweaks needed and most of them involve removing more code.

themes/jquery/css/base.css

mgol · 2026-01-29T22:44:04Z

themes/jquery/css/base.css

+ }
+
+ footer .books li:first-child {
+  margin-left: 0%;


In regular styles, we have margin-left: 2%. Do we need that? If not, both it and this override could be removed.

I believe the purpose of margin-left: 2% is for visual compensation, because the title of the first book, Learning jQuery Fourth Edition, is rather long, and without a margin-left, the left and right sides might appear visually asymmetrical.Should it be removed?

Actually, in the old layout the default margin-left for li elements in the books list is 2.8%, so this 2% for the first child decreases its margin, not increases it.

I think it's best to avoid such adjustments in the flex world. Let's remove this.

I will remove the 2% margin😀.

themes/jquery/css/base.css

mgol · 2026-01-29T22:46:29Z

themes/jquery/css/base.css

 	}

+ footer .books {
+  flex-wrap: wrap;


This is needed, but does it hurt to also leave it in general styles? Then we wouldn't need any additions to the max-width: 480px breakpoint; the general rules would cover everything.

Fix some issues

HermitShamiko · 2026-01-30T01:57:36Z

@mgol I have corrected most of the issues you mentioned. The fixed aspect ratio is no longer enforced below 480px. Finally, whether the margin-left code should be retained requires further judgment from you.

mgol

Thanks, this looks a lot cleaner now!

I'll need to test this myself and I'm away from my computer right now, so I'll test this early next week and I'll see if we need any more changes.

mgol · 2026-01-30T21:38:31Z

themes/jquery/css/base.css

-	min-width: 95px;
-	margin-left: 2.8%;
-	margin-bottom: 15px;
+	flex: 1 0 29%;


Why specifically 29% and not 30%?

Although the footer.books element in the original code has a width of 30%, I found during testing that maintaining 30% results in a display error on screens with dimensions between 770px and 940px.
footer .books li { float: left; width: 30%; min-width: 95px; margin-left: 2.8%; margin-bottom: 15px; line-height: 130%; font-size: 11px; text-align: center; }

The reason for this problem is that width(30%) x 3 + gap(16px) x 3 + first-child(2%) > 100%. Using 29%, it becomes width(29%) x 3 + gap(16px) x 3 + first-child(2%) < 100%. Of course, 29% isn't a very precise number, but it's simpler than using calc() and can display the desired result across all sizes.

If the restriction is that a needs to be at least as large as the contained image then flex-basis should just be set to 92px instead of a percentage. So, flex: 1 0 92px here.

mgol · 2026-01-30T21:38:56Z

themes/jquery/css/base.css

 	}

+	footer .books li {
+		min-width: 92px;


Can you explain where this number came from?

The width: 92px; here comes from the minimum image size set in the original footer.books.li a img attribute. I didn't change the actual image display size; I only rewrote the layout.
footer .books li a img { display: block; border-radius: 5px; border: solid 1px rgba(255,255,255,0.2); width: 92px; height: 114px; margin: 0 auto 5px; }
I think on devices with smaller screens, the size of the li element can be made to match the size of the img element inside it, so that the CSS can adapt to the screen size.

If you set flex above to 1 0 92px as I suggested, this will probably not be needed anymore.

mgol · 2026-02-02T17:43:13Z

themes/jquery/css/base.css

+	}
+
+	footer .books li:first-child {
+		margin-left: 0%;


See #486 (comment)

mgol

A few more comments

optimize layout

HermitShamiko · 2026-02-03T04:42:55Z

@mgol Oh yes, I forgot to check the margin-left: 2.8% in the old .books li, which caused me to misunderstand the purpose of the 2%.
I've removed the adjustment for widths below 480px for cleaner CSS.

mgol

Looks good, thank you!

HermitShamiko added 2 commits January 18, 2026 14:20

Optimize footer display on mobile devices

9ccaf16

Optimize footer display on mobile devices

Add files via upload

8be98aa

Fixed a bug that caused overflow when the width was too small.

mgol requested changes Jan 21, 2026

View reviewed changes

Rewrite the footer.books layout

04810a5

Rewrite the footer.books layout

HermitShamiko requested a review from mgol January 22, 2026 03:39

Merge branch 'jquery:main' into optimization

e5d2c69

mgol requested changes Jan 29, 2026

View reviewed changes

Fix some issues

01f2f8e

Fix some issues

HermitShamiko requested a review from mgol January 30, 2026 01:55

mgol reviewed Jan 30, 2026

View reviewed changes

mgol reviewed Feb 2, 2026

View reviewed changes

themes/jquery/css/base.css Outdated

}

footer .books li:first-child {

margin-left: 0%;

Copy link

Member

mgol Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #486 (comment)

mgol requested changes Feb 2, 2026

View reviewed changes

Add files via upload

0c917b4

optimize layout

HermitShamiko requested a review from mgol February 3, 2026 04:43

mgol approved these changes Feb 3, 2026

View reviewed changes

mgol merged commit 7201d5b into jquery:main Feb 3, 2026
5 checks passed

HermitShamiko deleted the optimization branch February 4, 2026 01:16

Conversation

HermitShamiko commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgol left a comment

Choose a reason for hiding this comment

Uh oh!

HermitShamiko commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgol left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HermitShamiko commented Jan 30, 2026

Uh oh!

mgol left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HermitShamiko Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mgol left a comment

Choose a reason for hiding this comment

Uh oh!

HermitShamiko commented Feb 3, 2026

Uh oh!

mgol left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

HermitShamiko commented Jan 18, 2026 •

edited

Loading

HermitShamiko commented Jan 22, 2026 •

edited

Loading

HermitShamiko Jan 31, 2026 •

edited

Loading