Khắc phục sự cố - Hiện khoảng trống khi trang cuộn ngang
Website Builder được thiết kế để giảm thiểu tối đa khả năng trang web xuất hiện thanh cuộn ngang bằng cách điều chỉnh chiều rộng nội dung tối đa (max width) không vượt quá ranh giới của vùng chứa. Tuy nhiên, trong một số trường hợp, phụ thuộc vào cách thiết lập của người dùng, hiện tượng trang bị cuộn ngang vẫn xuất hiện, chẳng hạn như:
Thiết lập chiều rộng quá lớn và thêm lề cho khối.
Thiết lập bố cục lưới có chiều rộng tối đa nhưng không tùy chỉnh phần đệm.
Thêm mã HTML tùy chỉnh.
Người dùng sẽ dễ dàng xác định phần cài đặt không chính xác dẫn đến cuộn ngang bằng cách kiểm tra nơi thanh cuộn xuất hiện để thu gọn bố cục trên trang web cửa hàng.
Bài viết này sẽ liệt kê các lỗi có thể xảy ra, cùng với hướng dẫn chi tiết cách khắc phục các lỗi giao diện thường gặp này.
A. Thiếp lập chiều rộng quá lớn và thêm lề cho khối
B. Thiết lập bố cục lưới có chiều rộng tối đa nhưng không tùy chỉnh phần đệm
C. Thêm mã HTML tùy chỉnh
Ví dụ: Khi người dùng thiết lập chiều rộng của khối rất lớn (chiều rộng đặt tối đa - full width, thiết lập chiều rộng của khối 100%,...) và thêm lề (trái/phải) khiến khối bị đẩy ra khỏi vùng chứa.
Cách khắc phục:
Thiết lập lại chiều rộng của khối về Auto
Điều chỉnh độ rộng khối thành giá trị nhỏ hơn tính bằng pixel. Bạn nên điều chỉnh pixel của khối theo cách thủ công sao cho giá trị pixel đáp ứng được trên cả giao diện di động và máy tính để nội dung trong khối không bị tràn ra ngoài.
Ví dụ: Khi người dùng thiết lập bố cục lưới trải dài toàn bộ chiều rộng của khối (Full width) và không thêm bất kỳ phần đệm (Padding) nào, dẫn đến mũi tên di chuyển giữa các sản phẩm không được hiển thị đầy đủ (do không đủ diện tích).
Cách khắc phục:
Tăng phần đệm (Padding) cho khối sao cho đủ diện tích hiển thị mũi tên di chuyển.
Tắt chế độ Full width của khối.
Ví dụ: Khi người dùng thêm mã HTML tùy chỉnh và không kiểm soát được mã có thuộc tính nào khiến trang hiện khoảng trắng và bị cuộn ngang.
Cách khắc phục: Bạn cần chủ động kiểm tra lại mã HTML xem có thành phần nào của mã gây ra lỗi hay không (chú ý các thuộc tính Width và Margin) và sửa lại cho hợp lý.
Bài viết liên quan
Bắt đầu với Website Builder
Thiết lập khối (block) trên Website Builder
Thiết lập mục (section) trên Website Builder
Thiết lập chiều rộng quá lớn và thêm lề cho khối.
Thiết lập bố cục lưới có chiều rộng tối đa nhưng không tùy chỉnh phần đệm.
Thêm mã HTML tùy chỉnh.
Người dùng sẽ dễ dàng xác định phần cài đặt không chính xác dẫn đến cuộn ngang bằng cách kiểm tra nơi thanh cuộn xuất hiện để thu gọn bố cục trên trang web cửa hàng.
Bài viết này sẽ liệt kê các lỗi có thể xảy ra, cùng với hướng dẫn chi tiết cách khắc phục các lỗi giao diện thường gặp này.
Nội dung bài viết
A. Thiếp lập chiều rộng quá lớn và thêm lề cho khối
B. Thiết lập bố cục lưới có chiều rộng tối đa nhưng không tùy chỉnh phần đệm
C. Thêm mã HTML tùy chỉnh
A. Thiết lập chiều rộng quá lớn và thêm lề cho khối
Ví dụ: Khi người dùng thiết lập chiều rộng của khối rất lớn (chiều rộng đặt tối đa - full width, thiết lập chiều rộng của khối 100%,...) và thêm lề (trái/phải) khiến khối bị đẩy ra khỏi vùng chứa.
Cách khắc phục:
Thiết lập lại chiều rộng của khối về Auto
Điều chỉnh độ rộng khối thành giá trị nhỏ hơn tính bằng pixel. Bạn nên điều chỉnh pixel của khối theo cách thủ công sao cho giá trị pixel đáp ứng được trên cả giao diện di động và máy tính để nội dung trong khối không bị tràn ra ngoài.
B. Thiết lập bố cục lưới có chiều rộng tối đa nhưng không tùy chỉnh phần đệm
Ví dụ: Khi người dùng thiết lập bố cục lưới trải dài toàn bộ chiều rộng của khối (Full width) và không thêm bất kỳ phần đệm (Padding) nào, dẫn đến mũi tên di chuyển giữa các sản phẩm không được hiển thị đầy đủ (do không đủ diện tích).
Cách khắc phục:
Tăng phần đệm (Padding) cho khối sao cho đủ diện tích hiển thị mũi tên di chuyển.
Tắt chế độ Full width của khối.
C. Thêm mã HTML tùy chỉnh
Ví dụ: Khi người dùng thêm mã HTML tùy chỉnh và không kiểm soát được mã có thuộc tính nào khiến trang hiện khoảng trắng và bị cuộn ngang.
Cách khắc phục: Bạn cần chủ động kiểm tra lại mã HTML xem có thành phần nào của mã gây ra lỗi hay không (chú ý các thuộc tính Width và Margin) và sửa lại cho hợp lý.
Bài viết liên quan
Bắt đầu với Website Builder
Thiết lập khối (block) trên Website Builder
Thiết lập mục (section) trên Website Builder
Cập nhật vào: 15/03/2024
Cảm ơn!