• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to control when Responsive layout changes?

Community Beginner ,
Dec 09, 2014 Dec 09, 2014

Copy link to clipboard

Copied

Using RoboHelp HTML 11.

I've just started using Responsive HTML5 on a desktop in Internet Explorer 11. I was wondering why this layout had no sidebar on the left, until I happened to expand the browser window to nearly full width of the screen. That's when it finally appeared.

Is there any way to control the point at which the sidebar appears or disappears?

Views

672

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 , Dec 10, 2014 Dec 10, 2014

Sure.

In the main.css file you'll find several @media rules. By changing those, you control the break points. Please note that the break points are used multiple times in the css. You have:

  • Mobile: @media screen and (max-width: 43.68em)
  • Tablet portrait: @media screen and (min-width: 43.69em) and (max-width: 59.49em)
  • Table landscape: @media screen and (min-width: 59.5em) and (max-width: 80.99em)
  • Desktop: @media screen and (min-width: 81em)
  • Printers: @media print

Kind regards,

Willam

Votes

Translate

Translate
LEGEND ,
Dec 10, 2014 Dec 10, 2014

Copy link to clipboard

Copied

Sure.

In the main.css file you'll find several @media rules. By changing those, you control the break points. Please note that the break points are used multiple times in the css. You have:

  • Mobile: @media screen and (max-width: 43.68em)
  • Tablet portrait: @media screen and (min-width: 43.69em) and (max-width: 59.49em)
  • Table landscape: @media screen and (min-width: 59.5em) and (max-width: 80.99em)
  • Desktop: @media screen and (min-width: 81em)
  • Printers: @media print

Kind regards,

Willam

Votes

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
Community Beginner ,
Dec 24, 2014 Dec 24, 2014

Copy link to clipboard

Copied

I also noticed in version 11.03 you need to change the @media rules in the layoutfix.min.css file in the output. Starting from the output folder, the file is in the \template\styles directory. Perhaps someone else can explain how this file is generated (from the masterthemeschema.xml file maybe?) and how this works.

Votes

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
LEGEND ,
Dec 30, 2014 Dec 30, 2014

Copy link to clipboard

Copied

You're right, I forgot about that one. Since RH11.0.3. introduced some significant changes to the layouts, Adobe provided a css file with a fix for issues caused by the 3 patch. This is done so that you don't need to reimport all layout you're already using. I haven't bothered with it yet, but I know it adds some CSS to fix several issues. If you make a backup, you can change that CSS file as well. But a patch may update the file without prior warning.

Kind regards,

Willam

Votes

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
Community Beginner ,
May 13, 2015 May 13, 2015

Copy link to clipboard

Copied

I wish someone would explain how the file works. It's really killing me. I have changed my media queries, but this layoutfix.min.css file contains the old queries and is causing issues. Every time I generate new help, I have to replace this file.

Votes

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
LEGEND ,
May 18, 2015 May 18, 2015

Copy link to clipboard

Copied

You can find the file in: C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\ResponsiveHelpExt\widgets\common\styles

I wouldn't recommend changing this file. It will get overwritten when Adobe fixes issues in the layouts in patches. It's better to find the culprit CSS selector and add that selector to your customised CSS. You can overwrite the styling from the layoutfix in your custom CSS without risking your changes getting overwritten in later versions.

Votes

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
LEGEND ,
May 18, 2015 May 18, 2015

Copy link to clipboard

Copied

Votes

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
Community Beginner ,
May 18, 2015 May 18, 2015

Copy link to clipboard

Copied

LATEST

I have time now to do that, but I had a demo scheduled the other day. Changing the file was exactly the workaround I needed to get through that demo.

Votes

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
Download Adobe RoboHelp