kunthawat/dealplustech-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(responsive): mobile footer restructure + categories 1-col + overflow fix
Some checks failed
Build & Deploy to EasyPanel / build-and-deploy (push) Has been cancelled
Details
Lint & Test / build-check (push) Has been cancelled
Details

Browse Source 
Three mobile issues fixed:

1. Categories section: <640px (mobile) now 1 column. Previously it was
   already 2 columns at the smallest breakpoint which made the tiles feel
   cramped. Uses Tailwind's default sm: (640px) for the 1->2 transition,
   not a custom min-[500px].

2. Footer mobile layout (<1024px): three centered rows inside the same
   max-w-7xl container.
     - Row 1: Company Info (1 col, max-w-md, centered)
     - Row 2: Quick Links + สินค้ายอดนิยม (2 cols, max-w-2xl, centered)
     - Row 3: ติดต่อเรา (1 col, max-w-sm outer, max-w-xs button column)
   The narrow inner max-widths are deliberate: a full-width row of
   contact buttons looks stretched, especially the bottom one with the
   โทรเลย / แอดไลน์ buttons.

3. Horizontal overflow bug: data-animate='fade-left' and 'fade-right'
   children sit at translateX(30px) / translateX(-30px) in their
   initial state, before the IntersectionObserver fires. On small
   viewports this pushes the page 30px wider than the viewport and
   reveals a horizontal scrollbar as soon as the user loads the page.
   Adding overflow-x-clip on <footer> keeps the off-screen translation
   contained inside the footer.
This commit is contained in:
hermes
2026-06-09 14:18:54 +07:00
parent 0bd480d103
commit b7931731f9
2 changed files with 109 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/index.astro
View File

@@ -315,7 +315,7 @@ const articles = (await getCollection('blog')).sort(
<p class="text-neutral-600 max-w-2xl mx-auto text-lg">ทุกหมวดเน้นงานอาคาร/โรงงาน/โรงแรม — คลิกเพื่อดูสินค้าเฉพาะหมวด</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6" data-animate-stagger>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6" data-animate-stagger>
<!-- Category 1: ท่อพีพีอาร์ (ไทย PPR) -->
<a href="/all-products?filter=ppr" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อพีพีอาร์" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />