Skip to content

chore: refine responsive styles for hero-stats grid on mobile devices #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hoangsonww merged 1 commit into from
Apr 22, 2026
Merged

chore: refine responsive styles for hero-stats grid on mobile devices #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 30 additions & 5 deletions wiki/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -549,15 +549,40 @@ ul li {
}

@media (max-width: 720px) {
.hero-stats { grid-template-columns: repeat(2, 1fr); gap: 2px; }
.hero-stat { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 0; }
.hero-stat:first-child { padding-top: 0; }
.hero-stat:nth-last-child(-n + 2) { border-bottom: 0; }
.hero-stat:nth-last-child(2) { padding-left: 18px; border-left: 1px solid var(--border); }
/* Zero the container's padding-top so the vertical divider (border-left on
even items) starts exactly at the border-top line with no gap. */
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0;
padding-top: 0;
}
.hero-stat {
border-right: 0;
border-bottom: 1px solid var(--border);
/* Uniform top padding on all items keeps rows aligned within their cells */
padding: 16px 0;
min-width: 0;
box-sizing: border-box;
}
Comment on lines +559 to +566
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 22, 2026

Choose a reason for hiding this comment

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

medium

The properties min-width: 0 and box-sizing: border-box are already applied globally to all elements via the universal selector at the top of the stylesheet (lines 36-40). Removing them here reduces redundancy and keeps the component styles focused.

  .hero-stat  {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    /* Uniform top padding on all items keeps rows aligned within their cells */
    padding: 16px 0;
  }

/* Right-column items: left divider connects with border-top since padding-top is on the items */
.hero-stat:nth-child(even) {
padding-left: 20px;
border-left: 1px solid var(--border);
}
/* Remove bottom border from last paired row AND lone item below it */
.hero-stat:nth-last-child(-n + 3) { border-bottom: 0; }
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 22, 2026

Choose a reason for hiding this comment

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

high

The selector :nth-last-child(-n + 3) incorrectly removes the bottom border from the right-hand item of the second-to-last row when the total number of items is even (e.g., in a 4-item or 6-item grid). This results in an inconsistent horizontal line where one item in a row has a border and its neighbor does not. To correctly target only the last row in a 2-column layout, use a selector that accounts for the grid's flow.

  .hero-stat:last-child, .hero-stat:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

/* Lone 5th item: span full width, center content, clear left styles */
.hero-stat:last-child:nth-child(odd) {
grid-column: 1 / -1;
text-align: center;
border-left: 0;
padding-left: 0;
}
}

@media (max-width: 480px) {
.hero-stats { grid-template-columns: 1fr 1fr; }
.hero-stat .n { font-size: clamp(14px, 5vw, 20px); }
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 22, 2026

Choose a reason for hiding this comment

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

medium

The clamp(14px, 5vw, 20px) font-size at the 480px breakpoint causes a jump in size. At 481px, the font size is 18px (from the base rule clamp(18px, 2.1vw, 24px)), but at 480px it jumps to 20px (since 5% of 480 is 24, clamped to 20). This makes the text larger as the screen gets smaller. Adjusting the scale to start at 18px at the breakpoint ensures a smooth fluid transition.

  .hero-stat .n { font-size: clamp(14px, 3.75vw, 18px); }

}

/* =============================================================================
Expand Down
Loading