✅ Tình trạng bạn gặp trên theme Lawyerbase khi mở trên iPhone hoặc thiết bị di động mà ảnh + chữ không hiển thị full màn hình thường do 2 nguyên nhân chính – Cách sửa theme Lawyerbase lỗi khi mở điện thoại không hiển thị full màn hình
Do cấu hình Responsive của theme
+ Theme Lawyerbase là theme cũ của GoodLayers, responsive mặc định nhưng đôi khi bị giới hạn max-width hoặc container width.
+ Trên mobile, theme thường set:
body .container {
max-width: 320px; /* hoặc 480px */
margin: 0 auto;
}
→ Điều này khiến nội dung không giãn full màn hình.
✅ Cách xử lý: thêm CSS tùy biến
@media (max-width: 767px) {
body .container,
body .gdlr-container {
max-width: 100% !important;
width: 100% !important;
padding: 0 10px !important;
}
img {
max-width: 100% !important;
height: auto !important;
}
}
Lỗi Do ảnh banner / background bị cố định kích thước
+ Các ảnh trong theme Lawyerbase (ví dụ page-title background) thường để:
hoặc dùng width: 1140px cố định.
Trên iPhone, nó không co dãn nên bị cắt hoặc không full màn hình.
✅ Cách xử lý: chỉnh lại CSS
.page-title-wrapper {
background-size: cover !important;
background-position: center center !important;
}
Lỗi Do meta viewport chưa chuẩn
Nếu file header.php không có thẻ này hoặc bị chỉnh sai:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ Thường iPhone sẽ không co dãn đúng tỉ lệ.
📌 Tổng qau lại:
=> Nếu chữ + ảnh không full chiều ngang, bạn chỉnh lại CSS container.
=> Nếu ảnh banner bị cắt hoặc không phủ màn hình, bạn chỉnh background-size: cover.
=> Nếu toàn bộ site không responsive đúng, kiểm tra lại meta viewport.
👍 Nếu muốn viết đoạn CSS đầy đủ để copy vào Customize → Additional CSS cho Lawyerbase, đảm bảo trên iPhone hiển thị tràn màn hình bạn hãy dùng đoạn css này nhé.
/* ==========================
Fix hiển thị full màn hình trên iPhone
Áp dụng cho Lawyerbase
========================== */
@media (max-width: 767px) {
/* Container & wrapper full width */
body .container,
body .gdlr-container,
body .content-wrapper,
body .gdlr-wrapper {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 12px !important; /* có khoảng cách nhỏ để chữ không dính sát màn hình */
}
/* Hình ảnh co giãn theo màn hình */
img {
max-width: 100% !important;
height: auto !important;
}
/* Banner, page title background full width */
.page-title-wrapper,
.gdlr-page-title-wrapper,
.page-title-background {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
width: 100% !important;
}
/* Tránh chữ bị thu nhỏ hoặc che mất */
h1, h2, h3, h4, h5, h6, p {
word-wrap: break-word;
line-height: 1.4em;
}
}
/* Đảm bảo viewport hiển thị đúng trên iPhone */
@viewport {
width: device-width;
zoom: 1.0;
}
👉 Đoạn này sẽ giúp nội dung hiển thị như sau: Bỏ giới hạn chiều ngang của container trên iPhone, Cho ảnh co giãn tự động, Banner, background phủ toàn màn hình, Nội dung chữ không bị bóp hoặc xuống dòng sai.
👉 Nếu bạn muốn tổng thể thì dùng CSS để tối ưu hiển thị cả trên iPad (tablet) cả khi xoay dọc (portrait) và ngang (landscape). Bạn chỉ cần copy toàn bộ đoạn dưới vào Customize → Additional CSS:
/* ==========================
Fix hiển thị full màn hình trên iPhone
Áp dụng cho Lawyerbase
========================== */
@media (max-width: 767px) {
/* Container & wrapper full width */
body .container,
body .gdlr-container,
body .content-wrapper,
body .gdlr-wrapper {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 12px !important;
}
/* Hình ảnh co giãn theo màn hình */
img {
max-width: 100% !important;
height: auto !important;
}
/* Banner, page title background full width */
.page-title-wrapper,
.gdlr-page-title-wrapper,
.page-title-background {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
width: 100% !important;
}
/* Tránh chữ bị thu nhỏ hoặc che mất */
h1, h2, h3, h4, h5, h6, p {
word-wrap: break-word;
line-height: 1.4em;
}
}
/* ==========================
Fix hiển thị trên iPad Portrait (dọc)
========================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
body .container,
body .gdlr-container,
body .content-wrapper,
body .gdlr-wrapper {
max-width: 100% !important;
width: 100% !important;
padding: 0 20px !important; /* padding rộng hơn để chữ thoáng hơn */
}
img {
max-width: 100% !important;
height: auto !important;
}
.page-title-wrapper,
.gdlr-page-title-wrapper,
.page-title-background {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
/* ==========================
Fix hiển thị trên iPad Landscape (ngang)
========================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
body .container,
body .gdlr-container,
body .content-wrapper,
body .gdlr-wrapper {
max-width: 100% !important;
width: 100% !important;
padding: 0 30px !important; /* padding rộng hơn để khi ngang vẫn cân đối */
}
img {
max-width: 100% !important;
height: auto !important;
}
.page-title-wrapper,
.gdlr-page-title-wrapper,
.page-title-background {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
/* Đảm bảo viewport hiển thị đúng trên mọi thiết bị */
@viewport {
width: device-width;
zoom: 1.0;
}
👉 Đoạn CSS này sẽ giúp web của bạn: Fix full width trên iPhone, Tối ưu hiển thị cho iPad dọc (chữ thoáng, không dính sát màn hình), Tối ưu hiển thị cho iPad ngang (padding cân đối hơn khi màn hình rộng).
Chúc bạn thành công.
Nguồn: Tổng hợp bởi Phanthanhviet.com – kết hợp Chatgpt
