Responsive HTLM5 output does not match template in skin editor

[Christine301653386cjz]

RoboHelp 2022 (version 2022.2.22).

The preview for the Azure Blue skin in the skin editor looks like this (and when I generated it on Tuesday, the output also looked like this):

Today, the preview still looks like, but the generated output looks like this:

 Instead of at the top, the TOC and index buttons are to the side.  The TOC also behaves differently.   I'm not sure what changed between Tuesday and yesterday/today - the output on Tuesday looked like the first screen print, and when I opened a book in the TOC, it still showed all of the TOC books (similar to how it does in frameless and how the TOC behaved in RH2017).  But now when I open a TOC book, it only shows the contents of that book and I have to select a previous folder icon (

) to get back to view all of the books.  I don't know what happened from one day to the next - yesterday morning I viewed the output before I even opened RoboHelp and it had changed, and no one else works in the project.  The output is the same on my PC as it is when I publish it on the intranet site.  

How to I get it back to looking like the preview - the first screen print?

(I also tried the Red_Green template just now with the same results - the TOC and index buttons are on the side instead of the top and the TOC doesn't let you view the whole thing once you've selected a book).

thanks!

[Jeff_Coatsworth · Accepted solution]

Try resizing your screen - the screen will reorganize the elements depending on how wide or narrow the browser window is.

[Christine301653386cjz]

Thank you so much!  I thought I was going insane.  Resizing the browser window didn't do anything at first, and I did try that yesterday although I always have it at full screen so I didn't expect it to suddenly be different if I made the window smaller.

But what was different is my display.  I almost always have my apps at 125%.  For an unrelated application, I'd changed it to 100% on Tuesday, and at 100% (with the browser at full screen) it appears like the preview with the buttons at the top.  I'd changed it back to 125% before logging off that night, not realizing that would have any effect on the output.  

[Jeff_Coatsworth]

Yup - that's the "responsive" part of HTML5 😁

[Jeff_Coatsworth]

ps - you might want to apply the last patch (#3) too

[Christine301653386cjz]

2022.3.93 is the latest version?  Only IT can apply update so I'll send it on to them.

[Jeff_Coatsworth]

At this very moment, yes.

[Amebr]

Yes, responsive web pages "respond" to the number of pixels wide your screen is. Changing that Windows display settings changes the definition of the size of a pixel. So at 125% there are "fewer" pixels than at 100%, so the responsive output thinks you are on a smaller screen and uses the Tablet view instead of the Desktop view.

[Christine301653386cjz]

That seems a little nuts - it's still a large screen with plenty of room to view the nonresponsive layout.  It doesn't matter too much for us because no one uses a tablet or smartphone, so I can just turn off the responsiveness.  But for others it might be nice to be able to adjust that, so it only changes with mobile or tablet (or if you make the browser window really small).

thanks!

[Amebr · Accepted solution]

You can change the number of pixels at which the change occurs, but you should double-check the behaviour on multiple phones and tablets to determine if it works in your situation. For example, you might change it so the tablet view never appears on tablets, and instead only phone view appears on all mobile devices. Look in the skin under Media Query. 

It's just one of those quirks related to physical pixels vs virtual pixels, not something Adobe did.