Change Logo on Mobile Device

[holger]

Hi there!
Our Company is using a broad Logo wich is getting very small on mobile devices. Is there any possibility to change the Logo when the Screen is getting smaller?

Thank you for your support!!
Holger

[Rui Guerreiro – SUPPORT]

Hi,

Yes, we can create a workaround with css.
Can you upload the desired logo for mobile and give us the full url that logo image?

Thanks

-Rui

[holger]

Hi Rui!
Thanks for your fast reply! The Path is http://hochzeitskartendesign.com/wp-content/uploads/2015/07/HKD-Slogan-rot-weiss-smartphone.png
Will you set the image for smartphone or tablet devices? Is it also possible to position the Logo in center of the header?

Thank you very much!
Holger

[Nishant – SUPPORT]

Hi Holger,

Can you please provide your WordPress admin login details? (Mark it as private reply using option below)

[holger]

This reply has been marked as private.

[Nishant – SUPPORT]

Please use this custom CSS

@media only screen and (max-width: 479px)
#logo a:first-child {
  max-width: 100% !important;
width:100%;
}

[holger]

Hi Nishtan!
I’ve inserter the code to my childtheme-style but nothing happens. i am also wondering how this code can be able to change the logo …
could you help me again?
thanks!

[Kyle – SUPPORT]

Will forward this to Rui for you

– Kyle

[Mohammad – SUPPORT]

Hi,
Please use this logo:-

@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(" http://hochzeitskartendesign.com/wp-content/uploads/2015/07/HKD-Slogan-rot-weiss-smartphone.png") repeat scroll 0 0 !important;
}

#logo img{display:none !important;}
}

Thanks
Mohammad

[rileyiwilliams]

Hi. I did the right thing and tried to find the answer to my problem, and I think this is the closest.

I need a different image on mobile devices, but I want to be able to specify a width for the image instead of resizing the actual image file, so that it can look good on different screen widths.

I’m using:

@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(“//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png”) repeat scroll 0 0 !important;
}

But can’t get it to reduce to look right.

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

If you are using the code you pasted above, then it’s missing a closing bracket at the end.
Can you check this?

-Rui

[rileyiwilliams]

Oh yeah, I copied it wrong.

@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(“//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png”) repeat scroll 0 0 !important;
}

#logo img{display:none !important;}
}

[Mohammad – SUPPORT]

Hi,
Is it working now?
Thanks
Mohammad

[rileyiwilliams]

Oh, no sorry I was unclear there.

I already had/have:
@media only screen and (max-width: 767px) {
#logo{
background:rgba(0, 0, 0, 0) url(“//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png”) repeat scroll 0 0 !important;
}

#logo img{display:none !important;}
}

but it needs something to make it fit right on the page.

The site is: hereboy.com.au

[Mohammad – SUPPORT]

Hi,
Please remove last css code and use this new code:-
@media only screen and (max-width: 767px) {

#logo{
height: 100px;
width: auto !important;
background: transparent url("//www.hereboy.com.au/wp-content/uploads/2015/09/webbanner-footer.png") no-repeat scroll 0px 0px / 100% !important;
}

#logo img{display:none !important;}
}
}

Thanks
Mohammad