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
Maximum Width
Moderators: Alexander Halser, Tim Green
-
- Posts: 90
- Joined: Tue Apr 12, 2005 2:44 pm
- Location: Ontario Canada
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Maximum Width
Hi Suzette,
There's no way to prevent a browser from maximizing if that's what the user wants to do.
There's no way to prevent a browser from maximizing if that's what the user wants to do.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 90
- Joined: Tue Apr 12, 2005 2:44 pm
- Location: Ontario Canada
Re: Maximum Width
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.
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
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Maximum Width
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.Suzette Leeming wrote: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.
Regards,
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
- Martin Wynne
- Posts: 2656
- Joined: Mon May 12, 2003 3:21 pm
- Location: West of the Severn, UK
Re: Maximum Width
Hi Suzette,Suzette Leeming wrote: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.
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">
Code: Select all
<div id="hmpagebody_scroller" style="max-width:900px;">
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.
-
- Posts: 90
- Joined: Tue Apr 12, 2005 2:44 pm
- Location: Ontario Canada
Re: Maximum Width
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
Suzette Leeming
-
- Posts: 454
- Joined: Thu Nov 16, 2006 1:29 pm
- Location: London, UK
Re: Maximum Width
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:
Generates a multi-column layout like this when maximized on a wide screen, and a conventional layout otherwise:
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.
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;"
>
You do not have the required permissions to view the files attached to this post.