The simplest way to illustrate this is this OBS Studio capture linked below of what happens with:

First, as suggested by jAlbum support, using Chrome's "Developer Tools" where one can reduce screen size on a PC's monitor (mine is 1080p), then via a freebie mobile simulator extension - in this case for an iPhone 11, but it's similar on other smartphones.

I tested this on my actual Galaxy smartphone, same thing.

Keep an eye on what happens to the theme image/hero section during both modalities. The left end of it where the logo is goes off-screen.

This should not be happening but it does on all pages, not just the index shown in video capture. In fact, on my Galaxy, the theme image/hero section is way out of proportion (too much height) and gets truncated on both sides, not just left.

Mobile Responsiveness Simulation in Chrome browser

The gallery

Edited by: psk-gallery on 17 Jan 2023, 00:55

Edited by: psk-gallery on 17 Jan 2023, 00:56

Edited by: psk-gallery on 17 Jan 2023, 00:59

"The theme image in most skins is a background image. It's not really responsive."

Well, as you may have noticed my index page theme image (rainbow forest path) is certainly not the same as the background (moonlit landscape).

I specifically created it to fit the dimensions for the hero design section - 150px height and 1080px max all-pages width. This because I didn't want to use the program's title section overlay.

This is one reason I realized after I posted the OP that the subfolder or pages' header theme-simile don't act as the index one - way worse - is that they are crops of images in that section's gallery, none of which are 150px high.

I'm planning on creating a 150x1080 theme for each page so that they will behave better.
______________________

"Remember, if the theme image were fully responsive, it would not only get narrower as the viewport shrinks, but it would get shorter. On a phone, you'd end up with a theme image that was 350px wide, but only about 60px tall."

That seems to me the way it should behave, even though what is above it disappears. The theme should be visible however skinny-wide it ends up being. NOT truncated. It should be there or not be there, not be cut off like that.

See the screenshot from my actual Galaxy phone. Its height/width proportions are OK, but still truncated on left side.

But the hero design section will be 150x1080px only on some devices.

In any event, that's not the way the skin was designed. If you choose to treat it as if it were designed that way, and not to use the built-in functionality of the hero section (as a container for titles, etc.), you're going to be frustrated and disappointed.

I believe that most of AndreWolff's skins use the theme image in the manner you describe, so you might want to use one of those.

Or write your own skin.


So, you'd be content to have the section's other content - text, buttons, etc. - simply spill out beyond the image? Or maybe the skin should shrink the size of the content so that, while it might be illegible, it still fits within the theme image?

The mobile simulator kicks in when you click the mobile button on the left top of the developer tools. That doesn't only change the page width - as you demoed - but also emulates the mobile experience in many other ways. The plugin works too, but besides the extra graphics it adds around the page, I don't think it behaves much differently. Probably it is using the same function of Chrome to emulate the mobile view.