Hướng dẫn sử dụng plugin Match Height để cân bằng nội dung

Hi mọi người, mình thấy một số website thường ở phần tin tức và các loại dạng box có tiêu đề và mô tả thì thường bị nhập nhô lên xuống, không đồng đều làm ảnh hưởng đến giao diện và nhìn rất khó chịu, hôm nay mình chia sẻ cách sử dụng plugin Match height rất hay giúp giải quyết vấn đề này thay vì sử dụng css và set min-height và overflow việc này ko hoàn hảo cho lắm vậy nên nhiều bạn bị dính cả responsive nhiều khi tràn nội dung hoặc bị che mất nôi dung =)) Mọi vấn để sẽ được giải quyết sau khi các bạn làm theo hướng dẫn của mình nhé

Các bước cài đặt và sử dụng plugin Match Height

Bước 1: Cài đặt Plugin

Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin bằng cách vào Quản trị > Gói mở rộng (plugin) > Cài mới > Gõ “Match height” vào khung tìm kiếm. Nhấn “Cài đặt ” để cài đặt plugin lên website

Bước 2: Cấu hình plugin

Đầu tiên các bạn xác định thẻ html cần căn chỉnh cho bằng nhau ví dụ như hình các bạn sẽ thấy các box không bằng nhau

Truy cập vào Cài đặt (Settings) > matchHeight và thiết lập nội dung cần cân bằng cho website, xác định thẻ cha và thẻ con để đồng bộ bằng nhau giữa các box như hình mình chia sẽ, vậy ở đây mình chọn thẻ cha là .home-product và các cân bằng nhau mình sẽ chọn là .product-small. Các bạn lưu ý sử dụng thẻ cho chính xác nhé

Sau đó các bạn nhập thẻ html đã chọn vào plugin như hình, sau đó bấm Update để lưu lại thông tin và xem kết quả nhé.

Hiện tại ở Flatsome product element đã có chế độ Equalize item giúp các cân bằng box nhé, các bạn có thể áp dụng cách này để sử dụng cho các trường hợp khác như tràn box text của blog, icon box …

Và đây là thành quả mà bạn đạt được sau khi sử dụng plugin Match Height, chúc các bạn thực hiện thành công.

Ngoài ra nêu các bạn chỉ muốn tiêu đề căn bằng nhau giữa các box các bạn có thể sử dụng đoạn code sau thay vì set height css. Code mẫu của mình đây.

HTML

.product-title {
  display: -webkit-box; 
  -webkit-box-orient: vertical; // tính theo chiều dọc
  -webkit-line-clamp: 3; // Số dòng hiện thị ở đây là 3 dòng
  overflow: hidden; // thuôc tính ẩn
}