Elementor: Chỉnh giao diện mobile đẹp nhanh (không vỡ layout)

TL;DR (làm nhanh theo thứ tự)

1. 1

   Chọn đúng breakpoint (Mobile/Tablet) trước khi sửa

   Trong Elementor, chuyển sang Responsive Mode → chọn Mobile hoặc Tablet.
   Đảm bảo bạn đang sửa đúng breakpoint, tránh “sửa mobile mà desktop cũng đổi”.
2. 2

   Chốt Container/Column: ưu tiên 1 cột trên mobile

   Với mobile, ưu tiên layout 1 cột, giảm số cột song song.
   Nếu đang dùng nhiều column, gộp nội dung về 1 cột hoặc dùng Wrap hợp lý.
3. 3

   Chuẩn hóa padding/margin theo nhịp 8px

   Bắt đầu từ section/container: chỉnh padding theo nhịp 8 / 16 / 24 để UI nhìn gọn.
4. 4

   Fix font: line-height và cỡ chữ dễ đọc

   Tiêu đề: 22–28px, nội dung: 14–16px, line-height: 1.4–1.6 (tham khảo).
5. 5

   Ẩn/hiện đúng chỗ, tránh duplicate bừa

   Chỉ duplicate section khi thật cần thiết.
   Thay vào đó ưu tiên: đổi thứ tự, đổi width, đổi spacing, đổi alignment theo breakpoint.

1) Cấu hình "chuẩn mobile" bạn nên chốt trước

2) Các lỗi phổ biến và cách sửa nhanh

3) Quy trình kiểm tra trước khi Publish (3 phút)

1. 1

   Scroll từ trên xuống dưới 1 lần ở Mobile

   Nhìn các dấu hiệu: tràn chữ, hình bị kéo, khoảng cách lộn xộn, CTA bị lạc.
2. 2

   Test 2 kích thước màn hình

   Ít nhất test: 390px (iPhone) và 360px (Android phổ biến).
3. 3

   Check tốc độ và ảnh

   Ảnh quá nặng → giảm dung lượng (WebP/AVIF), tránh ảnh vài MB trên mobile.

4) Nếu đang bị “vỡ layout” ngay lập tức — xử lý theo tình huống

5) Snippet CSS nhỏ (chỉ dùng khi bắt buộc)

/* Giảm tràn chữ tiêu đề trên mobile */
@media (max-width: 767px) {
  .hero-title {
    font-size: 26px;
    line-height: 1.2;
    word-break: break-word;
  }
}

/* Nút CTA full width trên mobile */
@media (max-width: 767px) {
  .cta-button {
    width: 100%;
    justify-content: center;
  }
}

6) Checklist cuối bài (copy dùng lại mỗi lần)

FAQ