Responsive and fluid layout

Responsive layout is achieved by applying additional classes to the columns. Four screen sizes are supported with different breakpoints.

Prefix Device Size ui-sm-* Small devices like phones max-width: 640px ui-md-* Medium-sized devices like tablets min-width: 641px ui-lg-* Large-sized devices like desktops min-width: 1025px ui-xl-* Big screen monitors min-width: 1441px

When an element features multiple style classes listed in the table, they get applied from the bottom to the top. Let's take an example:

<div class="ui-g">
  <div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
  <div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
  <div class="ui-g-12 ui-md-4 ui-lg-8">ui-g-12 ui-md-4 ui-lg-8</div>
</div>

What is happening here?

• On large screens, three columns are displayed in proportion 2:12, 2:12, and 8:12.
• On medium screens, two rows are displayed. The first row has equal columns and the second row has a column 4:12.
• On small screens (mobile devices) columns get stacked--each column is displayed in its own row.

The screenshot shows the arrangement of columns on medium-sized devices:

PrimeNG components have a built-in responsive mode. They understand a special ui-fluid style class. The Grid CSS and any other grid system can be used together with this style class, which provides a 100% width to components. This behavior helps to use the screen space efficiently. An example demonstrates various components in the fluid layout:

<div class="ui-fluid ui-corner-all">
  <div class="ui-g">
    <div class="ui-g ui-g-12 ui-md-6 ui-g-nopad">
      <div class="ui-g-12 ui-md-3 ui-label">
        Passenger
      </div>
      <div class="ui-g-12 ui-md-9">
        <input pInputText type="text"/>
      </div>
    </div>
    <div class="ui-g ui-g-12 ui-md-6 ui-g-nopad">
      <div class="ui-g-12 ui-md-3 ui-label">
        Flight day
      </div>
      <div class="ui-g-12 ui-md-9">
        <p-calendar [(ngModel)]="date" [showIcon]="true">
        </p-calendar>
      </div>
    </div>
  </div>
  <div class="ui-g">
    <div class="ui-g ui-g-12 ui-md-6 ui-g-nopad">
      <div class="ui-g-12 ui-md-3 ui-label">
        Notice
      </div>
      <div class="ui-g-12 ui-md-9">
        <textarea pInputTextarea type="text"></textarea>
      </div>
    </div>
    <div class="ui-g ui-g-12 ui-md-6 ui-g-nopad">
      <div class="ui-g-12 ui-md-3 ui-label">
        Destination
      </div>
      <div class="ui-g-12 ui-md-9">
        <p-listbox [options]="cities" [(ngModel)]="selectedCity">
        </p-listbox>
      </div>
    </div>
  </div>
</div>

The layout from medium up to big screens looks as follows:

The layout on small screens has stacked columns:

As you can see, all right-aligned labels become left aligned. You can achieve this behavior with media queries:

.ui-fluid .ui-g .ui-label {
  text-align: right;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  .ui-fluid .ui-g .ui-label {
    text-align: left;
  }
}