peptide-repo/peptide-starter-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile verdict explainer grid responsive layout (v2.2.0)

Browse Source 
- Remove double horizontal padding from .hero-verdict-explainer section
  (ps-container inside already provides 24px padding on each side)
- Switch base grid to single column; add 520px breakpoint for 2-col
  (below 520px, columns are too narrow for 'Investigational' pill)
- Add min-width: 0 to grid items to prevent implicit size blowout
- Add max-width: 100% to .pr-verdict inside items as overflow guard
- Sync style.css with production state (server had drifted from v2.1.8 HEAD)

Fixes: right-column cards misaligned/clipped on narrow mobile viewports
This commit is contained in:
peptiderepo
2026-04-29 06:10:28 +00:00
parent 6f85210950
commit bdc3ace6cf
1 changed files with 3187 additions and 3175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
style.css
View File

@@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter
Description: Premium, accessible WordPress theme for scientific peptide reference database Description: Premium, accessible WordPress theme for scientific peptide reference database
Author: Peptide Repo Author: Peptide Repo
Author URI: https://peptiderepo.com Author URI: https://peptiderepo.com
Version: 2.1.8 Version: 2.2.0
License: GPL v2 or later License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptide-starter Text Domain: peptide-starter
@@ -3179,7 +3179,7 @@ html[data-theme="dark"] .ps-verify-required {
============================================================================ */ ============================================================================ */
.hero-verdict-explainer { .hero-verdict-explainer {
padding: var(--spacing-3xl) var(--spacing-lg); padding: var(--spacing-3xl) 0; /* horizontal padding handled by ps-container inside */
background-color: var(--color-bg-secondary); background-color: var(--color-bg-secondary);
} }
@@ -3198,7 +3198,7 @@ html[data-theme="dark"] .ps-verify-required {
max-width: var(--container-lg); max-width: var(--container-lg);
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr; /* single column on narrow phones; 2-col added at 520px below */
gap: var(--spacing-md); gap: var(--spacing-md);
} }
@@ -3210,6 +3210,12 @@ html[data-theme="dark"] .ps-verify-required {
background-color: var(--color-bg-primary); background-color: var(--color-bg-primary);
border: 1px solid var(--color-border-default); border: 1px solid var(--color-border-default);
border-radius: var(--radius-md); border-radius: var(--radius-md);
min-width: 0; /* prevent grid item from blowing out column */
}
/* Cap pill width to column so Insufficient Evidence pill never overflows */
.hero-verdict-explainer__item .pr-verdict {
max-width: 100%;
} }
.hero-verdict-explainer__desc { .hero-verdict-explainer__desc {
@@ -3383,6 +3389,12 @@ html[data-theme="dark"] .ps-verify-required {
/* ---- RESPONSIVE — Featured Verdict Cards ---- */ /* ---- RESPONSIVE — Featured Verdict Cards ---- */
@media (min-width: 520px) {
.hero-verdict-explainer__grid {
grid-template-columns: repeat(2, 1fr); /* 520px+ gives columns wide enough for all pills */
}
}
@media (min-width: 640px) { @media (min-width: 640px) {
.hero-verdict-explainer__grid { .hero-verdict-explainer__grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);