Compass Listing Header

Improved the listing page by creating additional breakpoints that would allow the content in the header to break in a more graceful manner.

Original Header

Original Header

New Responsive Header

1040px or wider

At 1040px or wider the full header is used.

At 1040px or wider the full header is used.

1039px - 976px

From 1039px to 976px the header CTAs are displayed using icons only.

From 1039px to 976px the header CTAs are displayed using icons only.

975px - 800px

From 975px to 800px the listing details are wrapped to a 3rd line.  Widths below 800px break to our tablet and mobile layouts.

From 975px to 800px the listing details are wrapped to a 3rd line.

Widths below 800px break to our tablet and mobile layouts.