Skip to main content
S
shawnvw
Known Participant
December 9, 2014
Answered

How to control when Responsive layout changes?

  • December 9, 2014
  • 1 reply
  • 843 views

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?

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

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

1 reply

Willam van Weelden
Willam van WeeldenCorrect answer
Inspiring
December 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

    K
    kennethc2
    Known Participant
    December 24, 2014

    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.

    Willam van Weelden
    Willam van Weelden
    Inspiring
    December 30, 2014

    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

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