Code CSS fix lỗi vỡ khung khi chèn ảnh trong WP 100%
Khi bạn thêm hình ảnh vào bài viết với mô tả hình ảnh, thì bị vỡ khung ở giao diện. Đặc biệt hay xãy ra khi bạn dùng theme Flatsome. Đây là cách khắc phụ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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/* 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; } |
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 đã chia sẻ ý kiến!
Đang xử lý...
Đang tải...