Change Logo on mobile devices

sebastiang

Hi Appollo13 Team,

is there a way to change the svg logo (or just a jpg) on mobile devices? We want to use a completely different version of our logo on mobile.

https://werbung.sn.at

thanks and br
Sebastian

Air

Hello :-)

As for SVG it will not be possible, without bigger a change in the code.

However for normal images, like PNG or JPG, I could prepare custom CSS, that would help with that.

Upload both versions of the image for the logo into your media library, and post links to them here.

Also, set the desktop version logo as your main logo.

Based on that I will prepare custom CSS for you.

With kind regards.

sebastiang

That woul dbe great. Thank you.

Desktop Verison
https://werbung.sn.at/wp-content/uploads/sites/13/2022/03/snlogo.svg

Mobile Version
https://werbung.sn.at/wp-content/uploads/sites/13/2022/03/SNLogo.png

thx and br
Sebastian

Air

Hey :-)

In this case, both images will have to be PNGs, as different code is produced to display the SVG logo.

Please set the desktop logo as PNG as well.

With kind regards.

sebastiang

oh sorry. Of course.
Desktop Version
https://werbung.sn.at/wp-content/uploads/sites/13/2022/02/Schriftzug_SaNa_ohne-Claim.png

thx and br

Air

Could you also set it as your main logo, because it is still SVG logo on your website, and I will need to work with final settings, to give you proper custom CSS.

With kind regards.

sebastiang

Hi,
i set this logo as our main logo.
https://werbung.sn.at/wp-content/uploads/sites/13/2022/02/Schriftzug_SaNa_ohne-Claim.png

thx and br

Air

Hey :-)

I was sure it would be more problem, but it wasn't :-)
Please add such custom CSS:

@media only screen and (max-width: 1024px) {
a.normal-logo {
  background-image: url(https://werbung.sn.at/wp-content/uploads/sites/13/2022/03/SNLogo.png);
}
}

You can adjust the width of the mobile logo in the logo setting Max width – on mobile devices.

With kind regards.

sebastiang

love it. great support. thx and br