—— 用 CSS 把指定區塊改成橫向捲動，不要再硬塞成一排一排
內容導覽
▋ 問題不是卡片太多，是排版方向錯了
Loop Grid 到手機版常常變成一格卡一行。內容一多，畫面又擠又難掃。你再怎麼縮字、縮圖，版型還是醜。
結論是：不要硬救直排。直接改成橫向滑動。讓使用者用手指左右滑，比你繼續壓縮欄寬有效。
▋ 直接套這段 CSS
把下面這段貼到網站自訂 CSS，或頁面專屬 CSS。然後在目標 Loop Grid 外層容器加上一個 class：yao-loop-hscroll。
/* 只影響有 .yao-loop-hscroll 的 Loop Grid */
.yao-loop-hscroll .elementor-loop-container.elementor-grid {
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: unset !important;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.yao-loop-hscroll .elementor-loop-container.elementor-grid::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.yao-loop-hscroll .elementor-loop-container.elementor-grid > .e-loop-item {
flex: 0 0 312.5px;
width: 312.5px;
max-width: 312.5px;
}▍ 正確做法：只改指定區塊，不要全站一起拖下水
- class 掛在外層容器，不要亂掛在整站主容器。
- 卡片寬度要同步改
flex、width、max-width。 - 真要只限手機生效，再包一層 media query。
▋ 這段 CSS 為什麼有用？
因為你不是在調 Elementor 小設定。你是直接改容器的排版規則。預設 grid 會換行。改成 flex + nowrap，卡片就被鎖成同一列，再把超出的寬度交給 overflow-x: auto。
這比一直改欄數、欄距、內距更穩。因為根本問題不是間距。是手機版根本不該再硬維持多欄直排。
▋ 上線前怎麼檢查？
你要看三件事。
- —— 滑動是不是順，不要卡。
- —— 卡片寬度是不是一致，不要一張大一張小。
- —— 摘要字數和縮圖比例有沒有一起控好，不然會看起來東倒西歪。
▍ 判斷準則：如果你已經能左右滑，但卡片高低亂跳，問題不在 Loop Grid。本體是卡片內容長度沒控制。
小提醒：桌機版通常不需要這種做法。要用就精準用在手機版區塊，不要整站一起套。
需要 WordPress 客製化協助？歡迎聯絡我們
