WordPress 網頁在手機上跑版，用 GenerateBlocks 排的版面不用寫 CSS，在編輯器裡就能修好。把工具列的「檢視」切到行動裝置，畫布會變成手機寬度，這時到區塊樣式分頁改間距、對齊、欄數，改的值只作用在小螢幕，電腦版完全不受影響。
GenerateBlocks 的網格內建手機斷點，手機直拿本來就會自動疊成一欄，不會整排擠在一起。實際會遇到的是另外幾種：電腦版的間距到小螢幕顯得太大、標題想置中、平板寬度三欄擠成細條。我們用好喝咖啡的首頁把這三種各修一次，任何在電腦上排好的頁面都能照著做。
快速重點
| 製作需求 | 在哪裡做 |
|---|---|
| 縮小手機上過大的間距 | 切到 Mobile，改 Spacing 裡 MARGIN 或 PADDING 的值 |
| 手機的文字要另外對齊 | 切到 Mobile，用 Typography 的 TEXT ALIGNMENT |
| 平板欄數太擠要減欄 | 切到 Tablet & mobile，改 GRID LAYOUT 的 GRID TEMPLATE COLUMNS |
表裡的大寫英文（MARGIN、GRID LAYOUT）就是面板上分類標題的原樣，畫面上照著字面找就可以。
1.把編輯器預覽切到行動裝置
不用拿手機出來對照，編輯器裡就能看到手機畫面。打開頁面後點右上角的「檢視」（螢幕圖示），選「行動裝置」。
畫布會縮成手機的寬度，先整頁捲一遍找問題。我們的頁面就有一個：店名標題和營業資訊卡之間空了一大截，這是電腦版的間距原封套到手機的結果。
2.選營業資訊的網格，打開樣式分頁
開左上角的清單檢視，點第一個 Grid 選到營業資訊的網格，右欄切到樣式分頁（半圓圖示），裝置列已經自動跟著停在 Mobile。打開「Spacing」找到 MARGIN，Top 欄位是空的，只淡淡顯示一個 5。空白代表沿用電腦版的值，這格繼承的就是電腦版的 5rem，手機還沒有自己的設定。
3.把手機的上邊距改成 2.5rem
在 MARGIN 的 Top 填 2.5，按 Tab，單位會自動沿用 rem，畫布上的空白立刻縮成一半。這個值只寫進手機的設定，電腦版還是原本的 5rem。
4.把店名標題改成置中
清單檢視點店名標題（Headline），樣式分頁一樣停在 Mobile，打開「Typography」。往下找到 TEXT ALIGNMENT，四顆對齊按鈕點第二顆，手機上的標題就置中了，電腦版維持原本的置左。
5.切到 Tablet & mobile，把三大特色改成兩欄
用「檢視」切到平板裝置，三大特色的三欄擠成細條，一行只塞得下幾個字。清單檢視點第二個 Grid，這次把側欄的裝置列切到 Tablet & mobile，打開「Layout」裡的 GRID LAYOUT，在 GRID TEMPLATE COLUMNS 填 1fr 1fr（兩個等寬欄位），三欄就變成兩欄。這組設定會套用到 1024px 以下的螢幕。手機還有自己的 Mobile 規則，兩邊同時有設定時，Mobile 會優先，所以手機仍會疊成一欄。
6.儲存，回行動裝置預覽整頁驗收
按右上角的「儲存」，再用「檢視」切回行動裝置整頁看一遍：上方的空白合理了，店名標題也置中了。三個手機微調用的都是同一個模式，切到對的裝置層再改值，之後遇到其他跑版，換個區段照做就好。
常見問題
在手機上改的設定會影響電腦版嗎？
不會。切到 Mobile 之後，空白的欄位代表沿用電腦版的值，填了值才會寫進手機專用的設定，只在小螢幕生效。電腦版的值原封不動，切回 All screens 或桌面預覽就能確認沒被動到。
想讓某個區塊只在手機隱藏，做得到嗎？
做得到。選取區塊後切到側欄的設定分頁（齒輪圖示），DEVICE VISIBILITY 底下有四個開關，打開 Hide on Mobile 這個區塊就只在手機消失，電腦版照常顯示。它和我們調間距用的是同一套螢幕寬度規則。
平板需要另外調嗎？
看畫面決定，用工具列的「檢視」切到平板裝置看一眼，版面沒問題就不用動。要調就切到裝置列的 Tablet & mobile 改，GenerateBlocks 會讓手機的設定優先權最高，平板怎麼調都不會弄壞手機的版面。
下一步
拿自己的頁面照這套流程檢查一遍：切到行動裝置整頁捲一次，間距太大就在 Mobile 改 Spacing，對齊要換就改 Typography，再切到平板裝置看欄數擠不擠。每次只改看得到問題的那個值，改完整頁再看一遍。
頁面還沒有自己的品牌顏色和字體的話，可以接著看：WordPress 怎麼一次改全站的顏色和字體？全域色與字型設定。
照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。