Skip to main content
M
MDennetti
Inspiring
February 7, 2017
Answered

How to modify a Responsive HTML5 layout

  • February 7, 2017
  • 1 reply
  • 1003 views

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.

This topic has been closed for replies.
Correct answer Willam van Weelden

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.

1 reply

Willam van Weelden
Willam van WeeldenCorrect answer
Inspiring
February 8, 2017

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.

M
MDennettiAuthor
Inspiring
February 8, 2017

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.

A
Community Expert
AmebrCommunity Expert
Community Expert
February 8, 2017

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

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