Maximum Width

[Suzette Seveny]

In our webhelp (using a responsive skin in PP3) how can I set a maximum width? We really hate the way it looks on wide screen monitors.

Suzette Leeming

[Tim Green]

Hi Suzette,

There's no way to prevent a browser from maximizing if that's what the user wants to do.

[Suzette Seveny]

Thanks for the response Tim,

I was referring to the width of the text within the browser window. If someone's browser is maximized, my help files (text heavy) don't look very good if they have a wide screen monitor.

[Tim Green]

I was referring to the width of the text within the browser window. If someone's browser is maximized, my help files (text heavy) don't look very good if they have a wide screen monitor.

Well, if the browser is maximized then window is going to be wider, that is an unavoidable consequence. That is why people don't do that, particularly on large monitors. I know you want some kind of artificial limit so that the WebHelp would be displayed with wide margins around it or something like that. That would be counterproductive, however, and would cause serious problems with responsive layout.

[Martin Wynne]

In our webhelp (using a responsive skin in PP3) how can I set a maximum width? We really hate the way it looks on wide screen monitors.

Hi Suzette,

Using the PP3.10 responsive skins, in the PP Toolbox, edit the Page Template for the skin you are using.

Find this line:

Code: Select all

<div id="hmpagebody_scroller">

and change it to:

Code: Select all

<div id="hmpagebody_scroller" style="max-width:900px;">

Change the 900px to whatever maximum width you wish to set for the content pane.

And then Save it.

I've tested this and it's working fine responsively on my systems.

Bear in mind that if any part of the topic content is wider than your maximum, it will cause a horizontal scrollbar to appear rather than expanding into the empty space. This may annoy your users.

Take care when editing the page template not to make any errors or change anything else inadvertently.

regards,

Martin.

[Suzette Seveny]

Thank you so much Martin! I'm going to play around with this setting and see if I can improve how my help files display. I appreciate your response.

Suzette Leeming

[Simon Dismore]

I haven't tested this properly but if your users have "evergreen" browers another option is to use CSS3 columns so if they go full-screen they see two columns of text. For example, using Martin's instructions, this style:

Code: Select all

<div 
     id="hmpagebody_scroller" 
     style="-webkit-columns: 2 720px; -moz-columns: 2 720px; columns: 2 720px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em; -webkit-column-rule: 1px dotted #ddd; -moz-column-rule: 1px dotted #ddd; column-rule: 1px dotted #ddd;"
>

Generates a multi-column layout like this when maximized on a wide screen, and a conventional layout otherwise:

Two columns in V3 PP Minimalist Standard skin.png

It's not perfectly behaved but it might be helpful. The idea is explained in detail in the Guide to Responsive-Friendly CSS Columns article at CSS_Tricks. Current browser support is listed on the caniuse website.