Skip to main content
C
Christine301653386cjz
Known Participant
April 4, 2024
Answered

Responsive HTLM5 output does not match template in skin editor

  • April 4, 2024
  • 3 replies
  • 592 views

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!

This topic has been closed for replies.
Correct answer Amebr

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.

3 replies

A
Community Expert
AmebrCommunity Expert
Community Expert
April 4, 2024

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.

    C
    Christine301653386cjzAuthor
    Known Participant
    April 10, 2024

    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!

    A
    Community Expert
    AmebrCommunity ExpertCorrect answer
    Community Expert
    April 11, 2024

    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.

      Jeff_Coatsworth
      Community Expert
      Jeff_CoatsworthCommunity Expert
      Community Expert
      April 4, 2024

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

      C
      Christine301653386cjzAuthor
      Known Participant
      April 4, 2024

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

      Jeff_Coatsworth
      Community Expert
      Jeff_CoatsworthCommunity Expert
      Community Expert
      April 4, 2024

      At this very moment, yes.

      Jeff_Coatsworth
      Community Expert
      Jeff_CoatsworthCommunity Expert
      Community Expert
      April 4, 2024

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

        C
        Christine301653386cjzAuthor
        Known Participant
        April 4, 2024

        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
        Community Expert
        Jeff_CoatsworthCommunity Expert
        Community Expert
        April 4, 2024

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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices