Demo phía cuối trang web
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<section class="mobile_chat hidden-md hidden-lg"> <div class="container"> <div class="row codfe_row"> <div class="col-xs-3 chat-item"> <a href="tel:0123456789" class="chat-item-url"> <div class="chat-item-image"> <img src="https://codfe.com/wp-content/uploads/2022/02/icon_phone.png" class="img-responsive" alt="goi-dien"> </div> <div class="chat-item-text"> Gọi điện </div> </a> </div> <div class="col-xs-3 chat-item"> <a href="sms:0123456789" class="chat-item-url"> <div class="chat-item-image"> <img src="https://codfe.com/wp-content/uploads/2022/02/icon_sms.png" class="img-responsive" alt="nhan-tin"> </div> <div class="chat-item-text"> Nhắn tin </div> </a> </div> <div class="col-xs-3 chat-item"> <a href="http://zalo.me/0123456789" class="chat-item-url"> <div class="chat-item-image"> <img src="https://codfe.com/wp-content/uploads/2022/02/icon_zalo.png" class="img-responsive" alt="chat-zalo"> </div> <div class="chat-item-text"> Chat Zalo </div> </a> </div> <div class="col-xs-3 chat-item"> <a href="https://www.messenger.com/t/https://www.facebook.com/aiken.trung/"> <div class="chat-item-image"> <img src="https://codfe.com/wp-content/uploads/2022/02/icon_fb.png" class="img-responsive" alt="facebook"> </div> <div class="chat-item-text"> Facebook </div> </a> </div> </div> </div> </section> <style> .codfe_row{ display: flex; } .mobile_chat { background: #fff; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; box-shadow: #ebebeb 0 0 20px; } .chat-item { padding: 5px 10px; } .col-xs-3 { width: 25%; } .chat-item a { display: block; } .chat-item .chat-item-image { width: 100%; float: left; } .chat-item .chat-item-image { height: 35px; display: flex; justify-content: center; align-items: center; } .chat-item .chat-item-image img { height: 32px; } .chat-item .chat-item-text { width: 100%; float: left; } .chat-item .chat-item-text { height: 20px; font-size: 11px; display: flex; justify-content: center; align-items: center; } .chat-item .chat-item-text { width: 100%; float: left; } .chat-item .chat-item-text { height: 20px; font-size: 11px; display: flex; justify-content: center; align-items: center; } </style> |
A ơi cho e hỏi e muốn ẩn hiển thị trên Desktop thì phải làm như thế nào ạ??
E đã thử CSS lại r nhưng không đc
@media only screen and (min-width: 980px) {
.codfe_row{
display: none!important;
}
}
Em thay bằng dòng cod sau thử nhé
@media only screen and (max-width: 768px) {
/* For mobile phones: */
/* YOUR MOBILE STYLE HERE */
}
thu gọn kiểu kiểu như này đó bạn, rất mong đc bạn phản hồi, thanks so much
Để co lại khung liên hệ bạn cần có kiến thức về Css chút cụ thể như sau:
Trong đoạn code trên tìm đoạn css mobile_chat thêm vào 2 dòng như bên dưới
.mobile_chat { ……. max-width: 50%; margin-left: 25%;}
Trong đó max-width: 50%; là chiều ngang khung liên hệ, margin-left: 25%: giúp căn giữa khung liên hệ nhé
Rất cảm ơn bạn đã share code, đẹp và nhẹ nhàng quá. Bạn cho mình hỏi chút, mình muốn thay mục Facebook thành “địa chỉ” và thu gọn khi hiển thị trên PC đc ko bạn, thanks bạn nhiu nhiu
<div class=”col-xs-3 chat-item”>
<a href=”https://www.messenger.com/codfehcm“>
<div class=”chat-item-image”>
<img src=”//theme.hstatic.net/1000391295/1000499396/14/icon_fb.png?v=406″ class=”img-responsive” alt=”facebook”>
</div>
<div class=”chat-item-text”>
Facebook
</div>
</a>
</div>
Nếu muốn thay nội dung button Facebook bạn tiến hành thay 3 dòng in đậm bên trên nhé gồm: Link liên kết icon button và tên hiển thị bên dưới
Anh ơi cho e hỏi e muốn thay chat zalo bằng chat viber thì làm như thế nào ạ .rất mong anh giúp đỡ
Bạn thay icon và href thẻ a thành href=”viber://chat?number=0912222222″ xem nhé! Mình chưa có test vì không xài viber
Sao kh có chia ra cột được vậy add
Cái row bao quanh các nút bạn thiếu display: flex; nhé. Mình vừa cập nhật thêm trong code, bạn thay lại thử.
cho e hỏi sao lại chỉ hiển thị trên di động mà web không hiển thị vậy ad
Không hiển thị đi động là do mình cố ý vậy “hidden-md hidden-lg” . Bỏ 2 class này là ok nhé!
có code để hiện thị trên di dộng thanh bar ntn nhưng trên web thì là nút icon ở bên phải k ạ, e cảm ơn
Ad ơi sao của e cài lên khong duoc hien thi ngang ma la doc vay? xin ad giup em vơi ạ
Em kiểm tra lại css nhé