How to change webhelp homepage based on screen size

[ann.jensen]

Hi,
I am looking to implement something like you have on https://www.oxygenxml.com/doc/versions/18.0/ug-editor/ where the editor image and name disappears when the screen size reduced to phone size.
Can you advise how much customisation was required to achieve this?
Thanks in advance,
Ann

[radu_pisoi]

Hi,

I think it is not necessary to implement anything if you use the Webhelp Responsive output.

The Webhelp Responsive output is designed to adapt to any device and screen size. By default, when the display size is reduced to the phone size the logo and product name are hidden.

[ann.jensen]

Hi Radu,
From what I can see, when I set the Welcome message it appears in the wh_welcome div, whereas in Oxygen site it is part of ug-editor-name div. The ug-editor-name div content disappears when screen size reduces but the wh_welcome div content doesn't.
The ug-editor-name div doesn't appear to be part of any standard oXygen XML Author files.

Regards,
Ann

[bogdan_cercelaru]

Hello,

For this message we are using the "webhelp.fragment.before.main.page.search" parameter that points to a file with the following content:

Code: Select all

<div id="ug-editor-name">Oxygen XML Editor 18.1<div id="ug">User Guide</div> </div>

and the following custom CSS:

Code: Select all

@media only screen and (max-width: 767px) {

	#ug-editor-name {

		display:none;

	}

}

Regards,
Bogdan