Skip to main content
kmbcollie
kmbcollie
Known Participant
December 30, 2014
Question

Responsive Layout Issues ...

  • December 30, 2014
  • 1 reply
  • 608 views

First off a new year wish from a long time Robohelp user --  "Adobe quit breaking things and if things get broke - fix them quickly so your customers are provided with a stable product!".

I used Theme black ... no customization except font and logo change. So now when i publish my project to a server... it does not show text below the content holder. I tried the solution on one of these posts to add the following  to layout.css (which I think is replaced with layoutfix.min.css).

div.contentholder {

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;

}

iframe.wTopic {

  width: 99% !important;

  height: 99% !important;

}

Issue 1 - (no scroll /cut off pages)

Above  solution worked fine for the content (topic) pages on devices and desktop but still does not work for the rest of the template (search pages, index, glossary, and TOC) on devices. Works perfectly on the desktop.

Issue 2 - Century Gothic Font is substituted (I think for Times New Roman)

The project uses a custom CSS for the project and that works fine and displays everything correctly in the content (topic) pages on devices and desktop; however, the template css (search pages, index, glossary, and TOC) displays in a serif font on IOS devices. I checked my custom responsive layout and my font is allocated correctly to the layout template.

HELP!

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
January 5, 2015

Hi,

I tested the issue with option 1 and it works fine for me. Having said that, I added a new Black layout to my 11.0.3. RH with hotfix installed. If you are using the layout since 11.0.2 you have to make some changes to the layout. Please follow the instructions at the bottom of the following page: http://helpx.adobe.com/robohelp/kb/issues-in-robohelp-1103.html

If this doesn't help, try adding the layout anew. If that doesn't work, please provide some more information such as the browsers/devices giving trouble.

Question 2 is not quite as simple as changing the font name. The font Century Gothic may not be available by default on all devices. And in that case you need to deliver that, if you have the license to do so. I wrote a blog about this recently, please see: http://www.wvanweelden.eu/blog/2014/11/29/adobe-robohelp-use-custom-fonts

Also, there may be something more simple at work here: The font Century Gothic contains a space in the font name. In CSS, you must put the name of the font between quotes ("Century Gothic") to make it work. In your CSS, do a find and replace for the font name to add the quotes.

Kind regards,

Willam

kmbcollie
kmbcollieAuthor
Known Participant
January 6, 2015

Q2 now fixed on ios devices -  Placed quotes around my two syllable font name and did a global change in the RH main.css in output's template folder and font displays perfectly and consistently

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