Hướng dẫn cách làm logo riêng biệt giữa máy tính và mobile trên Flatsome

Logo trên máy tính thường được sử dụng lớn hơn nếu dùng trên điện thoại có thể làm mất nhiều vị trí khi sử dụng trên điện thoại với màn hình nhỏ hơn. Hôm nay mình sẽ hướng dẫn các bạn sử dụng logo riêng biệt giữa máy tính và mobile nhé. Hình dung như trang web của Thế giới di động bạn xem bằng bảng mobile và bảng trên máy tính vậy.

Giao diện trên máy tính

Giao diện trên mobile

Lấy code dưới cho vào vào tùy biến css là có logo riêng biệt giữa máy tính và mobile rồi .

Lưu ý thay link hình ảnh bằng link logo của bạn nhé. Code mới chỉ áp dụng trên theme flastsome.

@media (max-width: 549px)
#logo img {
    max-height: 45px;
    opacity: 0;
    margin-right: 10px;
}
.logo a {
    background-image: url(http://localhost/spa/wp-content/uploads/2020/10/LOGO1MOBILE-copy.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    margin-right: 10px;
}
.logo a {
    text-decoration: none;
    display: block;
    color: #446084;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
}

Lời Kết

Chúc Các Bạn Thành Công Với ToiCode.Net Blog , các bạn có thể tìm thấy cho mình những thủ thuật hay nhất và cả một loạt những cách để bạn làm giàu ngay trên thế giới Internet rộng lớn này !