Setting Minimum and Maximum Width on Content

Not all content displays as desired when stretched to a maximum size of a device or reduced (shrunk) too much to fit a smaller space, or device. There are functional minimum and maximums, which should be defined on the content so that scrolling occurs or the size of the area no longer grows in terms of minimum and maximum values for width. When creating custom fluid pages, or customizing delivered pages, it is your responsibility to manage the styling for these minimum and maximum values.

It is recommended that you do not set the minimum and maximum values directly on the group box with the style ps_apps_content, as this can cause browser issues.

The ps_apps_content style implements the flex model. Pages are laid out as a column based on flex model with horizontal stretching. This can cause varying results per browser type when attempting to stretch the width fully while restricting the width based on a max-width value.

It is recommended to include a layout group box within the ps_apps_content group box containing your page content, and apply the minimum and maximum widths on the interior group box.

Layout Element Example

Structure and Style Class

 
GROUPBOX – class=ps_apps_content
    GROUPBOX – class=psa_my_content
         <page content goes here>

Style

 
.psa_my_content {
     min-width:320px;
     max-width: 1440px;
     margin:0 auto;  /* center content horizontally */
}