Sử dụng logo riêng biệt cho desktop và mobile trên Flatsome

Logo hiển thị trên desktop thường được sử dụng lớn hơn trên điện thoại, vì thế 1 số trường hợp nếu sử dụng chung logo thì hiển thị trên mobile sẽ không đẹp và không phù hợp với màn hình nhỏ hơn. Sau đây Mailinhwp.vn sẽ hướng dẫn các bạn sử dụng logo riêng biệt giữa desktop và mobile nhé.
Ví dụ như Theme Cellphones khi bạn xem bằng máy tính bàn và trên điện thoại sẽ hiển thị logo khác nhau.

Công việc rất đơn giản chỉ copy đoạn code dưới đây cho vào phần tùy biến css trong Theme Flatsome là có logo riêng biệt giữa desktop và mobile rồi. Bạn nhớ thay link hình ảnh bằng link logo của bạn nhé.

@media (max-width: 549px)
#logo img {
    max-height: 45px;
    opacity: 0;
    margin-right: 10px;
}
.logo a {
    background-image: url(https://mailinhwp.vn/wp-content/uploads/2023/03/logo-mailinhwp5.png.webp); //đường dẫn logo của bạn
    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;
}

kết quả trên mobile sẽ như thế này.