Ok, so I see this post comes with multiple questions now, so I will attempt to keep my reply as short as possible.
First of all, considering you have images of multiple aspects, some with light background, some with dark background, viewed from multiple devices, all with different screen aspects, and everything supposed to go nicely below your LOGO which you now have in BLACK. Add in the fact that you have set your intro to "contain" instead of "cover", which yes will display the entire image (un-cropped by screen), but will create two potentially large margins on left/right or top bottom ... all mixing in with the logo.
Sorry, but that is far from a perfect condition of course. As I mentioned in my previous post, the slideshow-INTRO is a compromise. Personally, the main idea is to use it for a specific selection of images, which 1) Is "OK" that is cropped, and 2) Works nicely with your specific logo. A good example is my own website
mjau-mjau.com.
Point is, use slideshow-intro as a simple module that works well on the front page combined with logo ... Or if you really really need your images there in multiple aspects in multiple colors to work nicely on multiple screens, then don't use it as an "intro"? If you still want to keep it, you must understand the consequences and the compromises involved. In your case, checking through your images on BOTH mob ile and desktop, I see lots of empty margins, and I see the black logo doesn't work nicely on many images ... surely better in white? Also, why so many images in the INTRO plugin? Why not select the 4-5 BEST photos, which also work well with logo and all layouts? If you want your visitors to enjoy your images, that should be from outside an "intro" plugin, insensitive to logos and screen/image aspects.
In fact: if I'm resizing my Desktop Browser, so that the mobile theme will be activated (menu only visible by clicking the menu button) the Logo is not visible.
Disregard this please. Because you are using the sidebar layout, X3 does not in realtime move the logo back and forth when resizing the browser. If you open it from mobile/tablet, the logo will always display, also after orientation.
I already know, that there are some kind of limitations in responsive design...
- what if the orientation of the device will be changed
- what if the mobile device isn't a smartphone but a tablet with more "space"
- etc.
Same as my response above. If the orientation changes, it is still a tablet and touch devices. It doesn't jump layouts on mobile devices, and you cannot resize the browser. A tablet, even with "more space" will always show the slidemenu layout.
but right now, I think having the page logo overlaying the slide show isn't really a good solution and in fact, I would prevent something like the layout from the second screenshot
As mentioned, that layout simply won't happen on mobile devices. But what I don't understand is your question ... If you don't want the logo to overlay the image, then isn't this actually the solution you are looking for? The second layout is after all the logo hidden ... The empty "margins" on the sides are after all artifacts from your choice to use "contain" instead of "cover".
Logo
So finally, it also comes down to your logo (which is quite tall), which has to be displayed on mobile also. Here are two other websites with sidebar you might want to check:
http://dominiksellung.de/
https://www.pietrobiondo.it/
I would have changed my logo to WHITE instead of black if I was you, and remove the semi-transparent background. The logo will be visible on "most" images, and if some not, ok not a big problem. If you insist on having multiple aspects displayed in "contain" mode, you will have to accept the any visibility issues that may occur based on aspects. There is no "magic" for this. Personally, as noted above, I would not show that many images in intro, in contain mode, at least not if you also find it important to emphasize the logo, which is quite tall.
You have the option to set the width/height of your logo from Settings > Style > Logo. There are also some ways in CSS to for example change the size of the logo (make it even smaller) on mobile devices. X3 already has a MAX-WIDTH for the logo, but because your logo is tall and not really "too wide", it is not resized down. Let me know if you would like some custom CSS to for example scale the logo down on mobile devices. Apart from this, you will need to consider everything from above.
:star: