Bài viết này dành cho các bạn đang sử dụng WordPress và gặp phải vấn đề về khung bình luận Facebook bị thu hẹp, làm mất thẩm mỹ cho bố cục của website. WebsiteViet sẽ hướng dẫn bạn cách để khắc phục tình trạng này một cách hiệu quả.
Nguyên Nhân và Giải Pháp Khắc Phục
Ban đầu, nguyên nhân cụ thể của lỗi này không được rõ ràng và mất khá nhiều thời gian để phân tích. Tuy nhiên, chúng tôi nhận thấy rằng bằng cách sử dụng một số mã CSS đơn giản, bạn có thể dễ dàng khôi phục lại chiều rộng của khung comment Facebook về trạng thái bình thường.
Cách Áp Dụng Mã CSS:
Trước khi thực hiện, bạn cần đảm bảo rằng mình có quyền truy cập vào phần chỉnh sửa giao diện của website WordPress. Sau đó, dựa vào giao diện mà bạn đang sử dụng, có một số cách để chèn mã CSS:
- Cho Giao Diện Chính: Truy cập vào
Giao diện > Sửa > Style.css
. - Cho Theme Flatsome: Nếu bạn đang sử dụng theme Flatsome, hãy vào
Giao diện > Tùy chỉnh > Style > Custom CSS > Custom CSS
.
Sau khi vào được phần tùy chỉnh CSS của website, bạn hãy copy và paste đoạn mã CSS sau đây:
.fb-comments, .fb-comments span, .fb-comments span iframe {
width: 100% !important;
display: inline-block !important;
max-width: 100% !important;
}
Lưu và Kiểm Tra
Sau khi chèn mã, đừng quên lưu lại thay đổi và quay lại bài viết trên website của bạn để kiểm tra xem khung bình luận Facebook đã được chỉnh sửa thành công hay chưa.
Kết Luận
Với việc áp dụng đoạn mã CSS trên, bạn không chỉ giải quyết được vấn đề thu hẹp khung bình luận mà còn giúp cải thiện trải nghiệm người dùng trên website của mình. Đây là một phương án đơn giản nhưng hiệu quả để đảm bảo rằng khung bình luận của Facebook hiển thị đúng mực trên mọi thiết kế giao diện.
Hy vọng rằng bạn sẽ áp dụng thành công và nhận được kết quả tốt. Chúc bạn thành công với việc quản trị website WordPress của mình!
- WebsiteViet – Địa Chỉ Tin Cậy Cho Thiết Kế Website Chuyên Nghiệp
- Hướng Dẫn Chi Tiết Tải Và Cài Đặt Adobe Illustrator 2020 Cho Người Mới Bắt Đầu
- ACDSee Photo Studio Ultimate 2020: Phiên Bản Tối Ưu Cho Nhu Cầu Chỉnh Sửa Ảnh
- Dịch Vụ Thiết Kế Website Chuyên Nghiệp Tại Hải Phòng
- Tối ưu hóa hình ảnh với PicsArt: Hướng dẫn từ A đến Z cho người mới bắt đầu