Tagged: responsive logo
Hello,
I haveI need your help with the way my logo is being displayed on mobile devices.
1. My logo is composed out of 2 words. On mobile devices it it is displayed on 2 different lines, one on top of each other. I have tried modifying the width, it will just pull on the image, distorting it, instead of displaying as the original uploaded png, with 2 words on the same line.
2. Now that browsers are offering dark mode integration the logo will show on a white square background, although it is a png and the original file has a transparent background. Besides that, my logo is all black and I would need to use a different one, white for the dark mode. Is this possible?
Thank you!
Lucian
Hey Lucian,
Best regards,
Victoria
Dear Victoria,
Thank you very much for the quick reply.
So the word “translations”should be on the same line, after the first word. And not below it. Exactly like you see it on the desktop version. Enfold automatically puts them one on to of each other for some reason.
Please see the attached image for the dark mode problem.
Hi luciantstoian,
Best regards,
Victoria
Hi,
Sorry for the confusion. The word “translations” is now included in the actual logo image, so it looks the same on desktop and mobile. Is this how you want the logo to behave, or do you need to adjust it further?
Unfortunately, we are not really sure why the logo displays like that on dark mode. Are you using a browser extension? You can try this css code to make sure that the logo and logo link have a transparent background.
.logo, .logo a {
background: transparent;
background-color: transparent;
}
Best regards,
Ismael