Photo Gallery Forums

Hi Karl,

I have another question:

My main logo is quite large and I created a smaller version with surrounding text which I would like to use for smaller screens.
So basically I want to replace the original logo with another one for screens < 640px. 
Can you provide me with the needed CSS code?

Another thought: Maybe I will split the logo part from the surrounding text (my name), so I will have two separate files.

How can I add the second file (with text) to be shown next to my main image or below my main image?

Thanks,
Tom

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.

How can I achieve this?

tbp wrote:How can I achieve this?

Something like this for starters:

1. Go to Settings > Style > Logo, select "Logo Type": "text", and disable "Logo effects".

2. Add your HTML into the "Logo Title", something like this: 3. Add the following to Settings > Custom > Custom CSS: The above will provide the mechanics for toggling the visibility of two logos based on screen size, but you will need to then start tweaking the design of each element.