I must admit, there is no easy way do this without "hacks", definitely including custom HTML, CSS and possibly also Javascript. Perhaps there should be better options, but this would still be a "manual" customization task as soon as you want different logos to appear differently on different screens.
The optimal solution of course, would be to consider a logo that appears and works well on ALL screens ... We can also use custom CSS to tweak the logo (style, size, position) specifically for certain screen sizes/aspects, and that's what designers will normally do.
tbp wrote:So basically I want to replace the original logo with another one for screens < 640px.
Can you provide me with the needed CSS code?
The only way to achieve that, would be to add TWO logo images and toggle them via custom CSS using @media queries. Since "two" image logos is not an option in X3 settings, you would probably need to select "text" logo and then add your logos via HTML.
tbp wrote:Another thought: Maybe I will split the logo part from the surrounding text (my name), so I will have two separate files.
Possible of course, although things will get tedious to manage and style.