[marie21]

Hello,

I´m using a full-width (desktop width: 1200px) if I check the site on mobile device the logo will be reduced (responsive) but it look awfull because it´s to small …

Website: nest-electronics.com

Now I tried to it replace in customer css #site-logo, #site-header with content: url (http…img.jpg) but it doesn´t work.

Can you please help me?

Thank you very much in advance.

[Mahesh]

@marie21: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

@media screen and (max-width: 767px) {
    #site-logo .custom-logo-link {
        background-image: url('your-image-url-here');
    	background-size: cover;
        background-position: center;
        min-height: 150px;
    }

    #site-logo .custom-logo-link img {
        display: none;
    }
}

Let me know if any problem.

Note: please put in image url in the above code.

Regards,
Mahesh

[marie21]

Good morning,

I´m totally impressed about your fantastic support 🙂

The code works very fine. I´ve just modified a little bit as follows:

background-size: contain;
background-position: center;
min-height: 100px;
background-repeat: no-repeat;

and now it´s perfect.

Thank you very much (5-star rating is already done) 🙂

[Mahesh]

@marie21: Glad to know 🙂 Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Author]

Posts