👉 Bài viết này được Phan Thanh Việt chia sẻ nhằm hướng dẫn chi tiết cách tối ưu Theme Lawyerbase để đạt chuẩn SEO và có giao diện hiển thị đẹp trên mọi thiết bị. Nội dung tập trung vào việc cải thiện tốc độ tải trang, bố cục chuẩn SEO, sửa lỗi, css bổ sung đảm bảo thân thiện với người dùng di động và tối ưu trải nghiệm tổng thể. Chắc chắn đây sẽ là tài liệu hữu ích cho những ai đang sử dụng Theme Lawyerbase và mong muốn website của mình chuyên nghiệp, chuẩn mực và hiệu quả hơn.
Tại sao Theme Lawyerbase không hiện full ảnh banner khi cài MasterSlider và cách sửa Full ảnh banner
✅ Vấn đề này thường gặp khi theme Lawyerbase cài MasterSlider nhưng ảnh banner không hiện full màn hình (full width / full height).
Một trong 3 nguyên nhân sau:
+ Cấu hình slider chưa chuẩn: MasterSlider mặc định có nhiều layout: Fixed, Boxed, Full Width, Full Screen, nếu đang để chế độ Boxed thì ảnh chỉ hiển thị theo khung content, không tràn toàn màn hình.
+ CSS của theme Lawyerbase giới hạn chiều rộng: Nhiều theme (trong đó có Lawyerbase) đặt rule CSS kiểu:
.ms-container, .master-slider-parent {
max-width: 1170px;
margin: 0 auto;
}Ảnh gốc Banner không đủ kích thước
+ Nếu ảnh banner nhỏ hơn 1920px (chiều ngang) thì khi kéo ra full screen sẽ bị viền trắng hoặc vỡ hình.
Cách sửa để MasterSlider hiển thị full màn hình trong theme Lawyerbase
Bước 1. Cấu hình trong MasterSlider
=> Vào MasterSlider → Sliders → chọn slider bạn dùng.
=> Tab Slider Settings →
+ Layout: chọn Full Width (tràn ngang màn hình).
Hoặc chọn Fullscreen (tràn cả chiều cao màn hình).
Force Fullwidth: bật ON.
+ Hoặc Slider sizing method: Full Width và bật on Auto-height slider, sau đó tìm đến ” Layers parallax mode” để chọn ảnh slide tự động di chuyển hoặc Click chuột mới di chuyển, nếu muốn tự động di chuyển thì chọn ” Move While Sliding/Swiping” trong tab Parallax mode :
Responsive và Fluid height: bật ON để slider co giãn theo thiết bị.
Bước 2. Thêm CSS tùy chỉnh vào Customize → Additional CSS
/* Bắt MasterSlider full màn hình trong theme Lawyerbase */
.master-slider-parent,
.ms-container {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.master-slider-parent {
overflow: hidden !important;
}
/* Đảm bảo ảnh trong slider co giãn full */
.ms-slide-bgcont img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
Bước 3. Kiểm tra ảnh gốc Banner khi up lên web
+ Bạn nên dùng ảnh banner 1920x700px hoặc 1920x900px để hiển thị đẹp trên desktop.
+ Với chế độ Fullscreen, nên chọn ảnh 1920x1080px để không bị mờ.
Bước 4. Kiểm tra trên thiết bị mobile và iPad
+ Có thể thêm CSS responsive nếu ảnh bị co dãn sai tỷ lệ kiểu như.
@media (max-width: 768px) {
.ms-slide-bgcont img {
height: 100vh !important;
object-fit: cover !important;
}
}
👉 Bạn có thể chỉnh sửa thêm đoạn css này sẽ đảm bảo ảnh banner MasterSlider full màn hình trên mọi thiết bị, tối ưu riêng cho iPhone và iPad (ngang/dọc)
/* ================================
MasterSlider Fullscreen Responsive
Tối ưu cho iPhone + iPad + Mobile
Theme: Lawyerbase
================================ */
/* Reset container Lawyerbase giới hạn chiều rộng */
.master-slider-parent,
.ms-container {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.master-slider-parent {
overflow: hidden !important;
}
/* Ảnh nền trong MasterSlider co giãn full */
.ms-slide-bgcont img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
object-position: center center !important;
}
/* -------------------
iPhone (<= 767px)
------------------- */
@media (max-width: 767px) {
.ms-slide-bgcont img {
width: 100% !important;
height: 100vh !important; /* full chiều cao màn hình */
object-fit: cover !important;
object-position: center center !important;
}
.master-slider-parent {
height: 100vh !important;
}
}
/* -------------------
iPad dọc (768px–1024px)
------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.ms-slide-bgcont img {
width: 100% !important;
height: 100vh !important;
object-fit: cover !important;
}
.master-slider-parent {
height: 100vh !important;
}
}
/* -------------------
iPad ngang (768px–1024px)
------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.ms-slide-bgcont img {
width: 100% !important;
height: 100vh !important;
object-fit: cover !important;
}
.master-slider-parent {
height: 100vh !important;
}
}
Sau khi thêm đoạn CSS này sẽ đảm bảo:
+ iPhone: Banner luôn tràn chiều ngang và chiều cao màn hình.
+ iPad (ngang/dọc): ảnh vẫn giữ full màn hình, không bị viền trắng.
+ Desktop: hiển thị full width chuẩn theo cấu hình MasterSlider.
Cách khắc phục để Menu + nội dung full màn hình trên mobile
Bước 1: Kiểm tra viewport, Trong file header.php của theme hoặc child theme, chắc chắn phải có đoạn:
<meta name="viewport" content="width=device-width, initial-scale=1">
Bước 2: Ghi đè CSS cho container trên mobile: Dán vào Customize → Additional CSS ( CSS bổ sung) :
/* Ghi đè layout Lawyerbase để fullwidth trên mobile */
@media (max-width: 767px) {
.body-wrapper,
.content-container,
.container,
.gdlr-container,
.gdlr-core-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Menu mobile full width */
.mobile-menu-wrapper,
.gdlr-core-mobile-menu-container {
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
/* Nội dung bài viết không bị bó hẹp */
.single .content-container,
.page .content-container {
padding: 0 10px !important; /* giữ khoảng trắng nhỏ cho dễ đọc */
}
}
👉 Qua những chia sẻ trên, Phan Thanh Việthy vọng sẽ giúp bạn đọc có cái nhìn rõ ràng hơn về cách tối ưu Theme Lawyerbase chuẩn SEO, đảm bảo giao diện đẹp mắt và thân thiện trên mọi thiết bị. Nếu bạn áp dụng đúng các bước hướng dẫn, website của bạn sẽ không chỉ đạt hiệu quả cao về mặt kỹ thuật mà còn nâng cao trải nghiệm người dùng, góp phần cải thiện thứ hạng trên công cụ tìm kiếm và xây dựng hình ảnh chuyên nghiệp hơn.
CHÚC CÁC BẠN THÀNH CÔNG