How to modify a Responsive HTML5 layout

[MDennetti]

Could anyone advise how to modify the Responsive HTML5 layout in RoboHelp 11. I need to change the position at which the left-hand side of the page is hidden as you reduce the width of the browser. It does not appear to be possible to change this setting within the GUI, although I assume you could directly modify the file which controls this setting. This is an important aspect of the Help content, so I would appreciate any advice on how to change it from the current, default settings. Thanks very much.

[Willam van Weelden · Accepted solution]

Are you looking to change the point where the layout switches from Desktop to Tablet? This is controlled through media queries in the css.

In the CSS, you'll find the following media queries:

@media screen and (max-width: 43.68em) -> small pones

@media screen and (min-width: 43.69em) and (max-width: 59.49em) -> tablet in portrait

@media screen and (min-width: 59.5em) and (max-width: 80.99em) -> tablet in landscape

@media screen and (min-width: 81em) -> desktop

To change the so called 'break point', find and replace all occurrences of the relevant media query and change it however you want. Just make sure that if you change the width, you will also have to update the other queries to make sure there is no gap.

For example, say that you want to change the desktop view to be available from 1025px upwards (as 1024px width is an ipad in landscape). The current desktop is 1296px or wider (81 x 16).

You first count the EM measure:

1025 / 16 = 64.0625

Lets make that 64em.

You change the desktop:

@media screen and (min-width: 64em)

But now you have an overlap between tablet landscape and desktop because landscape goes up to 80.99. So now you change tablet desktop as follows:

@media screen and (min-width: 59.5em) and (max-width: 63.99em)

In RoboHelp 2015 and up, this setting is included in the RoboHelp GUI, so things will get better. For now, you're limted to doing it through the CSS.

[MDennetti]

Thanks. I need to change the point where point where the layout switches from Desktop to Tablet, and where it switches from Tablet to phone, so your advice is appropriate. However, I cannot find any reference to @media screen in the CSS file.  It is good to know that these changes will be controlled within the GUI in RoboHelp 2015.

[Amebr]

Which css file are you looking at? For example, for Theme3_Black it should be main.css, not the jquery css.

[MDennetti]

Thanks very much, both. I was not sure which CSS file to change, but your comments now make perfect sense. As we are moving to RoboHelp 2015, I will wait until the upgrade before making these changes as it should be more straightforward.

Best wishes,

Mark