blog density: Cody gate — hide the density slider on phones (auto-fill is 1-col under ~490px so --min was inert there; sort stays, it works on a 1-col list) + aria-label conveys direction. Rejected Cody's --cols suggestion (would force unreadable fixed columns on mobile)

b69f5973416df85a4da25990c70733c6e9faa550 · 2026-08-05 17:01:38 -0700 · Steve

Files touched

M public/blog.html

Diff

commit b69f5973416df85a4da25990c70733c6e9faa550
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 5 17:01:38 2026 -0700

    blog density: Cody gate — hide the density slider on phones (auto-fill is 1-col under ~490px so --min was inert there; sort stays, it works on a 1-col list) + aria-label conveys direction. Rejected Cody's --cols suggestion (would force unreadable fixed columns on mobile)
---
 public/blog.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/blog.html b/public/blog.html
index 90a2f20c..33bb629a 100644
--- a/public/blog.html
+++ b/public/blog.html
@@ -14,6 +14,7 @@ a{color:inherit;text-decoration:none}.wrap{max-width:1100px;margin:0 auto;paddin
 .controls select{font:600 13px 'Inter';padding:7px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
 .controls select:focus{outline:0;border-color:var(--red)}
 .controls input[type=range]{width:104px;accent-color:var(--red);cursor:pointer}
+@media(max-width:560px){.densl{display:none}}/* density is a no-op on phones — auto-fill is 1-col there regardless of --min; sort still works */
 .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min,300px),1fr));gap:22px;padding:16px 0 60px}
 .pc{border:1px solid var(--line);border-radius:8px;overflow:hidden;display:block;transition:.2s}.pc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
 .pc .img{aspect-ratio:16/9;background:linear-gradient(135deg,#475569,#c8102e)}.pc .img img{width:100%;height:100%;object-fit:cover;display:block}
@@ -33,7 +34,7 @@ footer{border-top:1px solid var(--line);color:var(--sub);font-size:12px;padding:
       <option value="cat">Category</option>
     </select>
   </label>
-  <label>Density <input id="dens" type="range" min="1" max="4" step="1" value="2" aria-label="Grid density (card size)"></label>
+  <label class="densl">Density <input id="dens" type="range" min="1" max="4" step="1" value="2" aria-label="Grid density — slide right for more, smaller cards"></label>
 </div>
 <div class="grid" id="grid"><p class="empty">Loading…</p></div></div>
 <footer><div class="wrap">RENTV.com · <a href="/" style="color:var(--red)">back to the front page</a></div></footer>

← fc0ee30d blog: add sort (Newest/Oldest/Title/Category) + density slid · back to Rentv · la-commercial: wire every datum to deeper data per the all-d c98cd596 →