Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How to modify a Responsive HTML5 layout

Participant ,
Feb 07, 2017 Feb 07, 2017

Copy link to clipboard

Copied

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.

TOPICS
HTML5 layout

Views

499

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 08, 2017 Feb 08, 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) -> desktopTo change the so called 'break point', fi...

Likes

Translate

Translate
LEGEND ,
Feb 08, 2017 Feb 08, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 08, 2017 Feb 08, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 08, 2017 Feb 08, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 09, 2017 Feb 09, 2017

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation