Code CSS Fix Lỗi Vỡ Khung Khi Chèn Ảnh Trong WP 100%

Code CSS fix lỗi vỡ khung khi chèn ảnh trong WP 100%

12/12/2024 Tinh Cầu Wordpress 396 lượt xem

Khi bạn thêm hình ảnh vào bài viết với mô tả hình ảnh, thì bị vỡ khung ở giao diện. Đặc biệt hay xãy ra khi bạn dùng theme Flatsome. Đây là cách khắc phục.

Hướng dẫn sử dụng:

Thêm CSS này vào file style.css của theme
Hoặc thêm vào phần Custom CSS trong Tùy chỉnh Theme
Nếu dùng plugin, có thể thêm vào phần Additional CSS

Các điều CSS này giải quyết:

Đảm bảo hình ảnh không bị vỡ khung
Responsive trên mọi thiết bị
Canh giữa caption
Hỗ trợ các class căn chỉnh mặc định của WordPress

/* Fix lỗi caption hình ảnh WordPress */
.wp-caption {
max-width: 100% !important;
width: auto !important;
margin: 0 auto;
padding: 0;
position: relative;
}

.wp-caption img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.wp-caption-text {
background-color: rgba(0,0,0,0.7);
color: #fff;
padding: 10px;
margin: 0;
text-align: center;
line-height: 1.5;
max-width: 100%;
box-sizing: border-box;
}

/* Responsive fix */
@media screen and (max-width: 767px) {
.wp-caption {
width: 100% !important;
}
}

/* Extra fix cho các trường hợp khác */
.aligncenter {
display: block;
margin: 0 auto;
}

.alignnone {
margin: 5px 20px 20px 0;
}

.alignright {
float: right;
margin: 5px 0 20px 20px;
}

.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

/* Fix lỗi caption hình ảnh WordPress */

.wp-caption {

max-width: 100% !important;

width: auto !important;

margin: 0 auto;

padding: 0;

position: relative;

}

.wp-caption img {

max-width: 100%;

height: auto;

display: block;

margin: 0 auto;

}

.wp-caption-text {

background-color: rgba(0,0,0,0.7);

color: #fff;

padding: 10px;

margin: 0;

text-align: center;

line-height: 1.5;

max-width: 100%;

box-sizing: border-box;

}

/* Responsive fix */

@media screen and (max-width: 767px) {

.wp-caption {

width: 100% !important;

}

/* Extra fix cho các trường hợp khác */

.aligncenter {

display: block;

margin: 0 auto;

}

.alignnone {

margin: 5px 20px 20px 0;

}

.alignright {

float: right;

margin: 5px 0 20px 20px;

}

.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

Vị trí chèn CSS:

Bạn có hài lòng với trải nghiệm tìm kiếm thông tin, sản phẩm trên website không?

Cảm ơn bạn đã đánh giá!

Code CSS fix lỗi vỡ khung khi chèn ảnh trong WP 100%

Vị trí chèn CSS:

Tin tức mới nhất

Kèo nhà cái là gì ? website kèo nhà cái nào chuẩn để tham khảo tỳ lệ kèo nhất ?

Thiết Kế Web Bongdalu – Dịch vụ thiết kế web bóng đá chuyên nghiệp

Function PHP xóa “Category Archives:” theme Flatsome không dùng CSS/JS

[Bình Long, Đồng Nai] Khóa học dựng Web WordPress 1:1 cầm tay chỉ việc

Dịch vụ thiết kế web bán sextoy đồ chơi tình dục tại Đồng nai

Được quan tâm

Download theme Flatsome Auto Update 2025

Share plugin check phạt nguội cho WordPress miễn phí

Thiết Kế Web Bóng Đá Chuyên Nghiệp giống bongdalu, bongdaso, keonhacai, bongdanet

Sở hữu website chuyên nghiệp chỉ 200k/tháng

Share Code tạo Element Danh Mục Bài Viết mới xuất hiện trong UX Builder Theme Flatsome

Chuyên mục

Vị trí chèn CSS:

Bài viết liên quan

Tin tức mới nhất

Được quan tâm

Chuyên mục