Responsive HTML5 Output: How to auto adjust the screen resolution for all devices?

[shareenawahab]

Responsive Layout HTML 5 output has to adjust the screen resolution and setting whereever the output is viewed ie. Desktop, Laptop, Tablet or Mobile.

But I can view the output of Desktop only in 95% zoom of the computer, in 100% zoom in desktop shows the output in the below format:

Desktop view:

    in 100% zoom: Its a bug, we need to fix it as like the second screen capture

   in 95 % zoom on desktop:

We need solution for this since we cannot refer the User the browser type & fixed screen resolution,

so I need my output should auto adjust to all screens and browsers, kindly fix me as early as possible, since I have been at the final phase of the project

[Willam_van_Weelden]

What do you mean by 'has to change the resolution'? Are you seeing the wrong outputs on devices? (That's what I can gather from the zoom levels.)

You can change the media queries to determine which devices see which version.

[shareenawahab]

The output need to get adapt with the zoom level of the devices. Yes , the desktop view seems to be like tablet view in 100% zoom. May I know what is media queries where I have fix that on Robohelp? Kindly help me with fixing this issue...

[Willam_van_Weelden]

The zoom level will affect the media queries, because the dimensions are changing. If you are seeing the tablet layout, your resolutions is probably too low.

You have to change the @media queries in the layout.css. CSS3 @media Query

They are used multiple times, so make sure to get them all.

[bharathys6992]

Though we tried to change layout.css file and tried changing properties in Screen Profiles and yet we could not get the resolution.

However wihile generating preview the resolution remains unchanged in Screen list drop down box.

Can you help us through this?

[Willam_van_Weelden]

You don't need the Screen Profiles for Responsive. Screen Profiles are for Multiscreen only.

What are the media queries you are using now in the layout.css?

Also, what happens when you generate an output instead of using the preview?

Kind regards,

Willam

[bharathys6992]

I would like to edit this Screen List drop-down box options which i mentioned in above image.

Which is I would like to change the value from 1245 to 1280 in Desktop options. How can it be done in RoboHelp?

[bharathys6992]

Desktop view - before change

Desktop View - after change

Tablet view - before change

Tablet view - after change

Phone view - before change

Phone view - after change

In 100% zoom we would like to get the output as below image (In desktop view)

[Willam_van_Weelden]

The CSS didn't come through in the web interface. (I got an unformatted CSS as notification though.) Can you use a file sharing tool like Dropbox to share the CSS?

[Willam_van_Weelden]

I'm not sure what you changed in your CSS. Try the following: Get the original CSS.

In the main.css there are four different media queries:

@media screen and (max-width: 43.68em) --( device width < 219px)

@media screen and (min-width: 43.69em) and (max-width: 59.49em) -- (Device witdh >= 219px and width < 952px)

@media screen and (min-width: 59.5em) and (max-width: 80.99em) -- (Device width >= 953px and width < 1296px)

@media screen and (min-width: 81em) -- (Device with >= 1296px)

You get the dimension as pixels by: em * 16.

Simply search and replace the 4 media queries as outlined above with the correct dimenstions, for example to get the following:

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

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

This changes where the layout breaks (70em = 16px*70 = 1120px width) so that smaller screens can also get the desktop layout.

[bharathys6992]

It works perfectly fine!!

Thank you so much William for sharing your knowledge and responses.

[Delennish]

I have the same issue, and my CSS was unchanged. The problem exists with Chrome and Firefox. I have to drop both down to 95% or below to even get the "desktop" layout to display on my laptop (and I'm running at 1920x1080). I implemented your suggestion, but I have two issues:

1. At roughly the same point where the layout changed before, the desktop layout still displays BUT the scroll bar is too long (it extends into the search field above the content pane)

2. A placeholder graphic (using for a demo to show the social widget options) also extends above the content pane.

[Peter Grainge]

I can't respond right now but there is information about Multiscreen and Responsive help in the sample projects and on my site, also in the Rh Tour from my site (look back through various Rh versions.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Delennish]

Peter, Sadly, I've already been through your site. This appears to be an issue that can be resolved with updating media queries and some additional changes. Unfortunately, it's the additional changes that I've not been able to sort out.

[Willam_van_Weelden]

What is your Windows DPI setting? The problem may have something to do with that.

Also, what happens if you use an unmodified layout. Will it work ok then?

[Delennish]

I grabbed one of our CSS guys who helped me identify the problem through the browser. I think I've learned more CSS today than I ever thought I would. The problem is with layoutfix.min.css.

When I changed my media queries, layoutfix.min.css did not update. It contains the old values. I am having to manually replace it each time I generate help. Where does it live? Clearly, there must be a source to change.

[Delennish]

Specifically, I had to change the media queries and remove top: 0.1em as shown below:

@media screen and (max-width: 70em) {

    div.floatholder div.content div.contentholder {

        position:absolute;

        left: 0.1em;

[Captiv8r]

I just did a search on my own PC and found one here:

C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\ResponsiveHelpExt\widgets\common\styles

Perhaps that's the seed file.

As always, standard disclaimers apply. Make a backup in case things go wonky.

Cheers... Rick

[Delennish]

It is indeed! Thanks! In the process, I discovered that removing the top: 0.1em line was a bad idea. All that was necessary was to update the media query in the min file to reflect the same changes made to main.css.

This is a relief. I have a demo tomorrow. I had a workaround (use IE), but I prefer to use Chrome.

[richaa37376493]

HI William,

I am using Robohelp 2017, but i am facing the following issues with the screen resolution.

While i am generating my responsive output the help opens with different zoom size for each page.

Also, when i provide the output folder to some other person in my team and he/she opens it on their system then the zoom level automatically changes and the window of each topic gets shrinked.

Regards,

Richa Arora